/* * Karcher Dealer Portal — Design System Tokens * * Source of truth for all brand color, typography, spacing, and * breakpoint values. Components reference the `--kp-*` semantic * aliases rather than the brand-color variables directly so the * theme can be retuned without touching every consumer. * * Brand standards: `Branding/Karcher_Overview_Styleguide_2020.pdf` * - Color rules: §4 (yellow #FFED00 dominates, full-tone only) * - Typography: superseded by Klean (Supertype, v1.029) * - Decision history: `project_m4_scope_decision.md` (memory) * * Loaded BEFORE all other stylesheets via `wwwroot/index.html` * so every downstream rule can reference these variables. */ :root { /* ============================================================ */ /* Karcher primary palette */ /* Always full-tone — never apply opacity/transparency. */ /* ============================================================ */ --kp-yellow: #FFED00; /* dominant brand color */ --kp-yellow-logo: #FFF000; /* logo only — do not use in UI */ --kp-black: #000000; /* RAL 9017 traffic black */ --kp-white: #FFFFFF; /* RAL 9010 pure white */ /* ============================================================ */ /* Accent palette — use sparingly for status/feedback. */ /* ============================================================ */ --kp-petrol: #238C96; /* info */ --kp-olive: #4B8969; /* success */ --kp-red: #B61A2D; /* danger */ --kp-sand: #B1B0A1; /* neutral accent */ /* ============================================================ */ /* Status-color extensions — Phase-4 PR-5 (hex sweep wave 2A). */ /* These are NOT brand-canonical: they preserve the brighter */ /* Bootstrap / Material status colors that appear across legacy */ /* page CSS (badges, alerts, mobile cards, hover states). The */ /* brand-canonical accents above (kp-petrol/olive/red) are */ /* the preferred surface; these brights/tints exist so the */ /* legacy palette can be tokenized without visible change. */ /* Future "brand voice" PR may rationalize this palette down. */ /* ============================================================ */ --kp-danger-bright: #DC3545; /* Bootstrap danger */ --kp-danger-hover: #C82333; /* Bootstrap danger:hover */ --kp-danger-tint: #FFEBEE; /* Material danger 50 */ --kp-danger-tint-strong: #FFCDD2; /* Material danger 100 */ --kp-success-bright: #28A745; /* Bootstrap success */ --kp-success-tint: #E8F5E9; /* Material success 50 */ --kp-success-tint-strong: #C8E6C9; /* Material success 100 */ --kp-warning-bright: #FFC107; /* Bootstrap warning */ --kp-warning-tint: #FFF3CD; /* Bootstrap warning bg */ --kp-warning-tint-strong: #FFE69C; /* warning 100 — pill borders */ --kp-info-bright: #1976D2; /* Material primary blue */ --kp-info-cyan: #17A2B8; /* Bootstrap info cyan */ --kp-info-tint: #E3F2FD; /* Material info 50 */ --kp-info-tint-strong: #BBDEFB; /* Material blue 100 — pill borders */ /* Deep (900-shade) text colors — paired with the matching *-tint backgrounds for soft status pills (kp-badge). High contrast on the tints (AAA). */ --kp-success-deep: #1B5E20; /* Material green 900 */ --kp-danger-deep: #B71C1C; /* Material red 900 */ --kp-warning-deep: #8D6708; /* dark amber — readable on warning tint */ --kp-info-deep: #0D47A1; /* Material blue 900 */ --kp-blue-primary: #007BFF; /* Bootstrap primary */ --kp-blue-google: #4285F4; /* Google blue */ --kp-yellow-dark: #E6D500; /* Karcher yellow @ 90% lightness */ /* ============================================================ */ /* Gray ramp — surface / text / divider hierarchy. */ /* */ /* Original 6-stop ramp (kp-gray-10 / 30 / 50 / 70 / 90 + base) */ /* shipped with PR 2. PR-6 (hex sweep wave 2B) added the */ /* intermediate stops below to tokenize the long tail of grays */ /* scattered across legacy page CSS without visible change. */ /* Future "brand voice" PR may rationalize this scale down. */ /* ============================================================ */ --kp-gray-95: #111111; /* very near-black (PR-6) */ --kp-gray-90: #2B2B2B; /* near-black surface */ --kp-gray-70: #333333; /* dark surface / heavy text */ --kp-gray-65: #555555; /* dark text (PR-6) */ --kp-gray-60: #666666; /* medium-dark text (PR-6) */ --kp-gray-55: #888888; /* medium gray (PR-6) */ --kp-gray-50: #757575; /* secondary text */ --kp-gray-45: #999999; /* medium-light gray (PR-6) */ --kp-gray-base: #6E6E6E; /* mid gray accent */ --kp-gray-30: #EDEDED; /* divider / disabled */ --kp-gray-25: #CCCCCC; /* light border (PR-6) */ --kp-gray-20: #DDDDDD; /* very light border (PR-6) */ --kp-gray-15: #F5F5F5; /* very light surface (PR-6) */ --kp-gray-10: #F8F8F8; /* page surface tint */ /* Bootstrap gray scale — tokenized for legacy CSS preservation. Distinct from the kp-gray-* ramp because the Bootstrap palette is centered slightly cooler. PR-6 wave 2B addition. */ --kp-gray-bs-50: #F8F9FA; /* Bootstrap bg-light */ --kp-gray-bs-100: #E9ECEF; /* Bootstrap bg-200 */ --kp-gray-bs-200: #DEE2E6; /* Bootstrap border */ --kp-gray-bs-300: #CED4DA; /* Bootstrap border-300 */ --kp-gray-bs-600: #6C757D; /* Bootstrap secondary */ --kp-gray-bs-700: #5A6268; /* Bootstrap secondary:hover */ --kp-gray-bs-900: #212529; /* Bootstrap text-dark */ /* ============================================================ */ /* Semantic aliases — components reference THESE. */ /* Theme retuning happens here, not at brand-color level. */ /* ============================================================ */ --kp-bg: var(--kp-white); --kp-surface: var(--kp-gray-10); --kp-text: var(--kp-black); --kp-text-muted: var(--kp-gray-50); --kp-accent: var(--kp-yellow); --kp-accent-on: var(--kp-black); /* text on yellow background */ --kp-success: var(--kp-olive); --kp-danger: var(--kp-red); --kp-info: var(--kp-petrol); /* ============================================================ */ /* Typography — Klean (Supertype, v1.029). */ /* License held by Karcher marketing. Files self-hosted at */ /* wwwroot/css/fonts/Klean/ via wwwroot/css/theme/_fonts.css. */ /* ============================================================ */ --kp-font-display: 'Klean Narrow Black', 'Klean Narrow', 'Klean', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --kp-font-body: 'Klean', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* Klean weight scale (matches Supertype's release v1.029) */ --kp-fw-regular: 400; --kp-fw-medium: 500; --kp-fw-bold: 700; --kp-fw-extrabold: 800; --kp-fw-black: 900; /* Font sizes — fluid for headlines, fixed for body */ --kp-fs-h1: clamp(2rem, 5vw, 3rem); --kp-fs-h2: clamp(1.5rem, 3vw, 2rem); --kp-fs-h3: 1.25rem; --kp-fs-body: 1rem; --kp-fs-small: 0.875rem; /* Line heights */ --kp-lh-tight: 1.1; --kp-lh-body: 1.5; /* ============================================================ */ /* Spacing scale — 4px grid. */ /* Use multiples; avoid arbitrary px values in scoped CSS. */ /* ============================================================ */ --kp-space-1: 4px; --kp-space-2: 8px; --kp-space-3: 12px; --kp-space-4: 16px; --kp-space-6: 24px; --kp-space-8: 32px; --kp-space-12: 48px; --kp-space-16: 64px; /* ============================================================ */ /* Breakpoints — match MudBlazor's xs/sm/md/lg/xl scale. */ /* Reference values; @media queries write the literal numbers */ /* because CSS variables don't work inside media queries. */ /* ============================================================ */ --kp-bp-xs: 600px; --kp-bp-sm: 960px; --kp-bp-md: 1280px; --kp-bp-lg: 1920px; }