/* ===================================================================== * Design-Tokens — Vertriebsdashboard * --------------------------------------------------------------------- * Stilziel: Linear / Vercel / Grafana — professionell, data-dense, * dark-mode-default. Token-gebunden — Komponenten greifen ausschliesslich * auf var(--token-*) zu. Keine Hex-Codes, keine rgb(), keine px-Werte * in Komponenten-Styles. * * Struktur: * 1. Farb-Primitives (raw HSL — niemals direkt in Komponenten) * 2. Semantische Surfaces (bg / surface-1 / surface-2 / borders) * 3. Typo-Skala * 4. Spacing- / Radius- / Shadow-Skala * 5. Lifecycle-Farb-Familie (5 Phasen × 4 Tier) * 6. Stub-Badge / Akzent * 7. Motion * 8. Light-Theme-Overrides (Reviewer-Pflicht: Kontrast ≥ 4.5:1) * ===================================================================== */ :root { /* --------------------------------------------------------------- * 1. Farb-Primitives (HSL für einfache Tier-Ableitung) * --------------------------------------------------------------- */ /* Neutral-Skala (Slate, kühl, Linear-nah) */ --hsl-neutral-50: 210 20% 98%; --hsl-neutral-100: 215 16% 94%; --hsl-neutral-200: 215 14% 86%; --hsl-neutral-300: 215 12% 70%; --hsl-neutral-400: 215 12% 52%; --hsl-neutral-500: 215 14% 38%; --hsl-neutral-600: 215 18% 24%; --hsl-neutral-700: 217 20% 17%; --hsl-neutral-800: 220 22% 12%; --hsl-neutral-900: 222 24% 8%; --hsl-neutral-950: 224 28% 5%; /* Akzent (Vercel-Cyan / Linear-Indigo-Mix) */ --hsl-accent-300: 205 95% 75%; --hsl-accent-400: 208 95% 65%; --hsl-accent-500: 212 95% 55%; --hsl-accent-600: 215 92% 47%; --hsl-accent-700: 218 88% 38%; /* --------------------------------------------------------------- * 2. Semantische Surfaces — Dark-Mode-Default * --------------------------------------------------------------- */ /* Hintergrund-Hierarchie (4 Ebenen) */ --color-bg: hsl(var(--hsl-neutral-950)); --color-surface-1: hsl(var(--hsl-neutral-900)); --color-surface-2: hsl(var(--hsl-neutral-800)); --color-surface-3: hsl(var(--hsl-neutral-700)); --color-surface-hover: hsl(var(--hsl-neutral-700) / 0.6); /* Borders */ --color-border-subtle: hsl(var(--hsl-neutral-700) / 0.55); --color-border: hsl(var(--hsl-neutral-600) / 0.7); --color-border-strong: hsl(var(--hsl-neutral-500)); /* Text */ --color-text: hsl(var(--hsl-neutral-50)); --color-text-muted: hsl(var(--hsl-neutral-300)); --color-text-subtle: hsl(var(--hsl-neutral-400)); --color-text-inverse: hsl(var(--hsl-neutral-950)); /* Akzent (Brand / Focus / Primary) */ --color-accent: hsl(var(--hsl-accent-500)); --color-accent-hover: hsl(var(--hsl-accent-400)); --color-accent-soft: hsl(var(--hsl-accent-500) / 0.15); --color-focus-ring: hsl(var(--hsl-accent-400) / 0.55); /* --------------------------------------------------------------- * 3. Typografie * --------------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Skala (clamp für Display, fix für Body) */ --font-size-display: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); --font-size-h1: 1.5rem; --font-size-h2: 1.125rem; --font-size-h3: 0.9375rem; --font-size-body: 0.875rem; --font-size-small: 0.8125rem; --font-size-micro: 0.6875rem; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-loose: 1.7; --letter-spacing-tight: -0.015em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-caps: 0.08em; /* --------------------------------------------------------------- * 4. Spacing / Radius / Shadow * --------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Shadows — Dark-Mode-tauglich (kräftig, nicht milchig) */ --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4); --shadow-md: 0 4px 12px -2px hsl(0 0% 0% / 0.5), 0 2px 4px -1px hsl(0 0% 0% / 0.3); --shadow-lg: 0 16px 40px -8px hsl(0 0% 0% / 0.65), 0 4px 12px -2px hsl(0 0% 0% / 0.45); --shadow-drawer: -16px 0 48px -12px hsl(0 0% 0% / 0.7), -2px 0 8px -1px hsl(0 0% 0% / 0.4); --shadow-focus: 0 0 0 3px var(--color-focus-ring); /* --------------------------------------------------------------- * 5. Lifecycle-Farben (5 Phasen × 4 Tier) * Tier: * bg — gefüllter Pill-Hintergrund (10–18% Alpha) * border — Dot / Akzent-Linie * text — Pill-Schrift (≥ 4.5:1 auf bg in Dark UND Light) * solid — sättigungs-volle Variante (KPI-Stacked-Bar, Drawer-Akzent) * --------------------------------------------------------------- */ /* neu — blau */ --color-phase-neu-bg: hsl(212 95% 55% / 0.16); --color-phase-neu-border: hsl(212 95% 60%); --color-phase-neu-text: hsl(212 95% 80%); --color-phase-neu-solid: hsl(212 95% 55%); /* aktiv — grün */ --color-phase-aktiv-bg: hsl(150 70% 45% / 0.18); --color-phase-aktiv-border: hsl(150 65% 50%); --color-phase-aktiv-text: hsl(150 70% 75%); --color-phase-aktiv-solid: hsl(150 65% 45%); /* passiv — gelb */ --color-phase-passiv-bg: hsl(45 95% 55% / 0.18); --color-phase-passiv-border: hsl(45 95% 60%); --color-phase-passiv-text: hsl(45 95% 78%); --color-phase-passiv-solid: hsl(45 90% 55%); /* reaktivierung — orange */ --color-phase-reaktivierung-bg: hsl(24 95% 55% / 0.18); --color-phase-reaktivierung-border: hsl(24 95% 60%); --color-phase-reaktivierung-text: hsl(24 95% 78%); --color-phase-reaktivierung-solid: hsl(24 92% 55%); /* abgewandert — rot */ --color-phase-abgewandert-bg: hsl(358 80% 55% / 0.18); --color-phase-abgewandert-border: hsl(358 80% 60%); --color-phase-abgewandert-text: hsl(358 85% 78%); --color-phase-abgewandert-solid: hsl(358 75% 50%); /* unbekannt — grau */ --color-phase-unbekannt-bg: hsl(220 15% 55% / 0.18); --color-phase-unbekannt-border: hsl(220 12% 58%); --color-phase-unbekannt-text: hsl(220 18% 78%); --color-phase-unbekannt-solid: hsl(220 12% 56%); /* --------------------------------------------------------------- * 6. Stub-Badge / Hinweis-Akzent * --------------------------------------------------------------- */ --color-badge-stub-bg: hsl(45 95% 55% / 0.14); --color-badge-stub-border: hsl(45 90% 55% / 0.5); --color-badge-stub-fg: hsl(45 95% 78%); /* Warn-Familie (Demo-Banner, generelle Warnhinweise). Orange-Ton * angelehnt an reaktivierung-Phase, aber semantisch eigenständig * (Demo-Indikator soll nicht mit Lifecycle-Phase verwechselt werden). */ --color-warn-bg: hsl(24 92% 55%); --color-warn-bg-soft: hsl(24 95% 55% / 0.18); --color-warn-border: hsl(24 95% 60%); --color-warn-text: hsl(24 90% 12%); --color-warn-text-soft: hsl(24 95% 78%); /* Sparten-Familie (Block 2, Steckbrief 4-Segment-Bar). Token-strikt: * basiert auf bestehenden Phase-Solids, damit Light/Dark-Switch greift. */ --color-sparte-komposit: hsl(var(--hsl-accent-500)); --color-sparte-leben: hsl(150 65% 45%); --color-sparte-kranken: hsl(45 90% 55%); --color-sparte-gewerbe: hsl(280 65% 60%); /* --------------------------------------------------------------- * Ampel-Familie (Teamleiter-Übersicht, AB-Test-Vergleich). * Semantisch eigenständig — nicht aliased auf Lifecycle-Farben, * da Ampel-Logik andere Schwellen hat als Lifecycle-Phase. * Tier: bg (Alpha-Fläche), border (Dot/Akzent), text, solid. * --------------------------------------------------------------- */ --ampel-rot-bg: hsl(358 80% 55% / 0.15); --ampel-rot-border: hsl(358 80% 60%); --ampel-rot-text: hsl(358 85% 78%); --ampel-rot: hsl(358 75% 52%); --ampel-gelb-bg: hsl(45 95% 55% / 0.15); --ampel-gelb-border: hsl(45 95% 60%); --ampel-gelb-text: hsl(45 95% 78%); --ampel-gelb: hsl(40 90% 52%); --ampel-gruen-bg: hsl(150 70% 45% / 0.15); --ampel-gruen-border: hsl(150 65% 50%); --ampel-gruen-text: hsl(150 70% 75%); --ampel-gruen: hsl(150 65% 45%); /* --------------------------------------------------------------- * 7. Motion * --------------------------------------------------------------- */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 220ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* --------------------------------------------------------------- * 8. Layout-Tokens * --------------------------------------------------------------- */ --layout-topbar-height: 56px; --layout-content-max: 1440px; --layout-content-pad: var(--space-6); --layout-drawer-width: clamp(420px, 38vw, 560px); --layout-grid-gap: var(--space-4); } /* --------------------------------------------------------------------- * Light-Theme — Override per data-attribute am * Reviewer-Pflicht: 5 Lifecycle-Farben mit Pill-Text-Kontrast ≥ 4.5:1 * --------------------------------------------------------------------- */ [data-theme="light"] { --color-bg: hsl(var(--hsl-neutral-50)); --color-surface-1: hsl(0 0% 100%); --color-surface-2: hsl(var(--hsl-neutral-100)); --color-surface-3: hsl(var(--hsl-neutral-200) / 0.6); --color-surface-hover: hsl(var(--hsl-neutral-100)); --color-border-subtle: hsl(var(--hsl-neutral-200) / 0.7); --color-border: hsl(var(--hsl-neutral-200)); --color-border-strong: hsl(var(--hsl-neutral-300)); --color-text: hsl(var(--hsl-neutral-900)); --color-text-muted: hsl(var(--hsl-neutral-600)); --color-text-subtle: hsl(var(--hsl-neutral-500)); --color-text-inverse: hsl(var(--hsl-neutral-50)); --color-accent: hsl(var(--hsl-accent-600)); --color-accent-hover: hsl(var(--hsl-accent-700)); --color-accent-soft: hsl(var(--hsl-accent-500) / 0.10); --color-focus-ring: hsl(var(--hsl-accent-500) / 0.4); /* Shadows weicher im Light-Mode */ --shadow-sm: 0 1px 2px 0 hsl(220 30% 20% / 0.08); --shadow-md: 0 4px 12px -2px hsl(220 30% 20% / 0.12), 0 2px 4px -1px hsl(220 30% 20% / 0.06); --shadow-lg: 0 16px 40px -8px hsl(220 30% 20% / 0.18), 0 4px 12px -2px hsl(220 30% 20% / 0.08); --shadow-drawer: -16px 0 48px -12px hsl(220 30% 20% / 0.18), -2px 0 8px -1px hsl(220 30% 20% / 0.08); /* Lifecycle — abgesättigte Pill-Farben mit dunklem Text (≥ 4.5:1) */ --color-phase-neu-bg: hsl(212 90% 92%); --color-phase-neu-border: hsl(212 85% 50%); --color-phase-neu-text: hsl(212 90% 28%); --color-phase-neu-solid: hsl(212 90% 50%); --color-phase-aktiv-bg: hsl(150 60% 90%); --color-phase-aktiv-border: hsl(150 60% 38%); --color-phase-aktiv-text: hsl(150 70% 22%); --color-phase-aktiv-solid: hsl(150 60% 38%); --color-phase-passiv-bg: hsl(45 95% 88%); --color-phase-passiv-border: hsl(38 90% 45%); --color-phase-passiv-text: hsl(32 90% 25%); --color-phase-passiv-solid: hsl(40 90% 50%); --color-phase-reaktivierung-bg: hsl(24 95% 90%); --color-phase-reaktivierung-border: hsl(20 85% 48%); --color-phase-reaktivierung-text: hsl(18 90% 28%); --color-phase-reaktivierung-solid: hsl(22 90% 50%); --color-phase-abgewandert-bg: hsl(358 90% 92%); --color-phase-abgewandert-border: hsl(358 75% 48%); --color-phase-abgewandert-text: hsl(358 85% 32%); --color-phase-abgewandert-solid: hsl(358 75% 48%); --color-phase-unbekannt-bg: hsl(220 16% 92%); --color-phase-unbekannt-border: hsl(220 10% 52%); --color-phase-unbekannt-text: hsl(220 18% 30%); --color-phase-unbekannt-solid: hsl(220 10% 52%); --color-badge-stub-bg: hsl(38 95% 88%); --color-badge-stub-border: hsl(32 80% 45%); --color-badge-stub-fg: hsl(28 90% 25%); /* Warn-Familie — Light-Theme: kräftiges Orange als Banner-Hintergrund, * dunkler Text für ≥4.5:1 Kontrast. */ --color-warn-bg: hsl(24 92% 50%); --color-warn-bg-soft: hsl(24 95% 90%); --color-warn-border: hsl(20 85% 38%); --color-warn-text: hsl(24 90% 12%); --color-warn-text-soft: hsl(18 90% 28%); /* Sparten-Familie — Light-Mode (etwas kräftiger für Kontrast auf hell) */ --color-sparte-komposit: hsl(var(--hsl-accent-600)); --color-sparte-leben: hsl(150 60% 38%); --color-sparte-kranken: hsl(38 90% 45%); --color-sparte-gewerbe: hsl(280 55% 50%); /* Ampel-Familie Light-Override: kräftigere Farben für ≥4.5:1 Kontrast */ --ampel-rot-bg: hsl(358 90% 92%); --ampel-rot-border: hsl(358 75% 46%); --ampel-rot-text: hsl(358 85% 30%); --ampel-rot: hsl(358 75% 46%); --ampel-gelb-bg: hsl(45 95% 88%); --ampel-gelb-border: hsl(38 90% 43%); --ampel-gelb-text: hsl(32 90% 23%); --ampel-gelb: hsl(38 90% 43%); --ampel-gruen-bg: hsl(150 60% 90%); --ampel-gruen-border: hsl(150 60% 36%); --ampel-gruen-text: hsl(150 70% 20%); --ampel-gruen: hsl(150 60% 36%); } /* Lokale @font-face — nur Systeminstallationen nutzen. * Keine asset-URLs, damit ein fehlender assets/fonts-Ordner keine 404s erzeugt. * Kein CDN, kein Google-Fonts-Link — Sandbox-Constraint. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: local("Inter"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: local("JetBrains Mono"); }