/* ============================================================ Multi-Instance Dashboard — Design-Tokens ------------------------------------------------------------ Quelle: Careli-Design-System aus dem Redesign-Export (frontend/design/redesign-2026-08/_ds/careli-design-system-*/ colors_and_type.css + _ds_manifest.json), zusammengeführt mit dem bestehenden --ads-*-API (HAN-5878, 2026-09-18). Vollständiges Mapping alt → neu: docs/design-tokens.md Vanilla-CSS-Variablen, kein Build-Tool, kein Framework. Standard-Theme = hell (Default). Dark via [data-ads-theme="dark"]. ============================================================ */ /* ------------------------------------------------------------ Schrift: Hero New — self-hosted (Owner-Entscheidung 2026-09-18) OTFs aus dem Design-System-Export, nach WOFF2 konvertiert (fonttools + brotli; ~144 KB OTF → ~65 KB WOFF2 je Gewicht). Nur die fünf benutzten Gewichte; Kursive wird im Dashboard nicht verwendet. Fallback-Kette siehe --ads-font-family. ------------------------------------------------------------ */ @font-face { font-family: 'Hero New'; src: url('../fonts/HeroNew-Regular.woff2?v=20260918') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hero New'; src: url('../fonts/HeroNew-Medium.woff2?v=20260918') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Hero New'; src: url('../fonts/HeroNew-SemiBold.woff2?v=20260918') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Hero New'; src: url('../fonts/HeroNew-Bold.woff2?v=20260918') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Hero New'; src: url('../fonts/HeroNew-ExtraBold.woff2?v=20260918') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* ============================================================ 1 · Careli-Brand-Palette (Rohwerte aus dem Design-System) ============================================================ */ --ads-pink: #FF4F79; /* primäre Aktion, Fokus, aktive Navigation */ --ads-pink-soft: #FFDCE5; /* Brush-Highlighter-Fläche */ --ads-pink-softer: #FFC2D4; /* Brush-Hover */ --ads-berry: #CC0066; /* Hover/Pressed der Primäraktion */ --ads-cerulean: #2B6C8C; /* Überschriften, informative Zustände */ --ads-alice: #E0EDF5; /* Seitenhintergrund, weiche Flächen */ --ads-linen: #E3E4DD; /* Border, Trennlinien (warm) */ --ads-slate-50: #F8FAFC; --ads-slate-100: #F1F5F9; --ads-slate-200: #E2E8F0; --ads-slate-400: #94A3B8; /* Labels, Captions */ --ads-slate-500: #64748B; --ads-slate-600: #475569; --ads-slate-700: #334155; --ads-slate-800: #1E293B; --ads-slate-900: #0F172A; /* Kompatibilität (DS endet bei 800) */ --ads-success: #10B981; --ads-warning: #F59E0B; --ads-danger: #EF4444; /* ---- Kompatibilitäts-Aliase (bestehende --mid-*-Namen). Weiterhin funktionsfähig, aber NEU nicht mehr verwenden — Quelle ist ab jetzt die --ads-*-Palette oben. ---- */ --mid-pink: var(--ads-pink); --mid-pink-brush: var(--ads-pink-soft); --mid-berry: var(--ads-berry); --mid-cerulean: var(--ads-cerulean); --mid-alice: var(--ads-alice); --mid-linen: var(--ads-linen); --mid-success: var(--ads-success); --mid-warning: var(--ads-warning); --mid-danger: var(--ads-danger); --mid-slate-50: var(--ads-slate-50); --mid-slate-100: var(--ads-slate-100); --mid-slate-200: var(--ads-slate-200); --mid-slate-500: var(--ads-slate-500); --mid-slate-600: var(--ads-slate-600); --mid-slate-700: var(--ads-slate-700); --mid-slate-800: var(--ads-slate-800); --mid-slate-900: var(--ads-slate-900); /* ============================================================ 2 · ADS-Rampen (N/B/G/Y/R/P) — an die Careli-Palette angelehnt; vor allem Träger der Styleguide-Swatches. N60–N90 füllen die Lücke zwischen N50 und N100 und werden von keiner Komponente referenziert. ============================================================ */ --ads-N0: #FFFFFF; --ads-N10: #F8FAFC; --ads-N20: #F1F5F9; --ads-N30: #EAF0F4; --ads-N40: #E3E4DD; /* Linen */ --ads-N50: #CBD5E1; /* Slate-300 */ --ads-N60: #B9C6D4; --ads-N70: #A6B4C3; --ads-N80: #94A3B8; /* Slate-400 */ --ads-N90: #7C8CA1; --ads-N100: #94A3B8; --ads-N200: #64748B; --ads-N300: #475569; --ads-N400: #334155; --ads-N500: #1E293B; --ads-N600: #172033; --ads-N700: #0F172A; --ads-N800: #0F172A; --ads-N900: #080F1D; /* Blue = Cerulean-Rampe (Sekundär-/Informationsfarbe) */ --ads-B50: #E0EDF5; --ads-B75: #C4DDEA; --ads-B100: #8CB9CF; --ads-B200: #5791AF; --ads-B300: #2B6C8C; --ads-B400: #2B6C8C; --ads-B500: #1E536D; /* Green = Success */ --ads-G50: rgba(16, 185, 129, 0.10); --ads-G400: #10B981; --ads-G500: #07885F; /* Yellow = Warning */ --ads-Y50: rgba(245, 158, 11, 0.12); --ads-Y400: #F59E0B; --ads-Y500: #C76B08; /* Red = Danger (DS-Basis #EF4444; R500 = abgeleitete Text-/Bold-Stufe) */ --ads-R50: rgba(239, 68, 68, 0.10); --ads-R400: #EF4444; --ads-R500: #B91C1C; /* Purple = Brand-Akzent (Pink/Berry) */ --ads-P50: rgba(255, 79, 121, 0.10); --ads-P300: #FF4F79; --ads-P500: #CC0066; /* ============================================================ 3 · Semantische Tokens (Light-Theme = Default) ============================================================ */ /* Brand / Primary — Pink mit Berry als Hover/Pressed */ --ads-color-brand: var(--ads-pink); --ads-color-brand-hover: var(--ads-berry); --ads-color-brand-pressed: var(--ads-berry); --ads-color-brand-subtle: rgba(255, 79, 121, 0.10); --ads-color-brand-bold: var(--ads-berry); /* Success — DS #10B981; hover/bold abgeleitet */ --ads-color-success: var(--ads-success); --ads-color-success-hover: #07885F; --ads-color-success-subtle: rgba(16, 185, 129, 0.10); --ads-color-success-bold: #07885F; --ads-color-success-text: #087A58; /* Warning — DS #F59E0B; hover/bold abgeleitet */ --ads-color-warning: var(--ads-warning); --ads-color-warning-hover: #C76B08; --ads-color-warning-subtle: rgba(245, 158, 11, 0.12); --ads-color-warning-bold: #C76B08; --ads-color-warning-text: #9A5705; /* Danger — DS #EF4444; hover/pressed/bold/text abgeleitet (das Design-System liefert nur die Basisfarbe) */ --ads-color-danger: var(--ads-danger); --ads-color-danger-hover: #C73535; --ads-color-danger-pressed: #A82C2C; --ads-color-danger-subtle: rgba(239, 68, 68, 0.10); --ads-color-danger-bold: #A82C2C; --ads-color-danger-text: #B91C1C; /* Info — Cerulean */ --ads-color-info: var(--ads-cerulean); --ads-color-info-subtle: var(--ads-alice); --ads-color-info-bold: var(--ads-cerulean); --ads-color-info-text: var(--ads-cerulean); /* Discovery — Pink/Berry */ --ads-color-discovery: var(--ads-pink); --ads-color-discovery-subtle: rgba(255, 79, 121, 0.10); --ads-color-discovery-bold: var(--ads-berry); --ads-color-discovery-text: var(--ads-berry); /* ---------- Surfaces / Background ---------- */ --ads-surface: #FFFFFF; --ads-surface-sunken: var(--ads-slate-50); --ads-surface-raised: #FFFFFF; --ads-surface-overlay: #FFFFFF; --ads-surface-hovered: rgba(224, 237, 245, 0.55); --ads-surface-pressed: var(--ads-alice); --ads-background: var(--ads-alice); --ads-background-neutral: var(--ads-slate-100); /* ---------- Text ---------- */ --ads-text: var(--ads-slate-800); --ads-text-subtle: var(--ads-slate-600); --ads-text-subtlest: var(--ads-slate-500); --ads-text-inverse: #FFFFFF; --ads-text-disabled: var(--ads-slate-400); --ads-text-brand: var(--ads-cerulean); --ads-text-link: var(--ads-cerulean); /* ---------- Border ---------- */ --ads-border: var(--ads-linen); --ads-border-bold: #B8C7CF; --ads-border-subtle: #EDF0ED; --ads-border-focused: var(--ads-pink); --ads-border-input: var(--ads-linen); /* ============================================================ 4 · Typografie Hero New (self-hosted) mit Manrope- und System-Fallback. ============================================================ */ --ads-font-family: 'Hero New', 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ads-font-family-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', Courier, monospace; --ads-font-size-50: 10px; /* kleinste (Lozenge) */ --ads-font-size-75: 12px; /* metadata / small */ --ads-font-size-100: 14px; /* body (default) */ --ads-font-size-200: 16px; --ads-font-size-300: 17px; --ads-font-size-400: 20px; --ads-font-size-500: 24px; --ads-font-size-600: 32px; --ads-font-weight-regular: 400; --ads-font-weight-medium: 500; --ads-font-weight-semibold: 600; --ads-font-weight-bold: 700; --ads-line-height-100: 18px; --ads-line-height-200: 22px; --ads-line-height-300: 24px; --ads-line-height-400: 28px; --ads-line-height-500: 32px; --ads-line-height-600: 40px; /* ============================================================ 5 · Spacing — 4px-Basis (bestehende Ops-Skala, vollständig) ============================================================ */ --ads-space-0: 0; --ads-space-025: 2px; --ads-space-050: 4px; --ads-space-075: 6px; --ads-space-100: 8px; --ads-space-150: 12px; --ads-space-200: 16px; --ads-space-250: 20px; --ads-space-300: 24px; --ads-space-400: 32px; --ads-space-500: 40px; --ads-space-600: 48px; --ads-space-800: 64px; --ads-space-1000: 80px; /* ============================================================ 6 · Radien — DS-Skala (sm 8 / md 12 / lg 16 / xl 24 / 2xl 32 / pill) als führende Namen; die numerischen --ads-radius-*-Namen bleiben als Alias-API erhalten (Komponenten nutzen sie). --ads-radius-200 (10px) ist ein Ops-Zwischenwert ohne DS-Pendant und bleibt bewusst erhalten. ============================================================ */ --ads-radius-sm: 8px; --ads-radius-md: 12px; --ads-radius-lg: 16px; --ads-radius-xl: 24px; --ads-radius-2xl: 32px; --ads-radius-pill: 9999px; --ads-radius-050: 4px; --ads-radius-100: var(--ads-radius-sm); --ads-radius-200: 10px; --ads-radius-300: var(--ads-radius-md); --ads-radius-400: var(--ads-radius-xl); --ads-radius-circle: 50%; --ads-border-width: 1px; --ads-border-width-bold: 2px; /* ============================================================ 7 · Schatten — DS-System (subtle / airbnb / floating / glow) als führende Namen; raised/overlay sind Alias-Ebenen der bestehenden Komponenten-API. overflow bleibt der Cerulean-getönte Ops-Karton-Schatten (kein DS-Pendant). ============================================================ */ --ads-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05); --ads-shadow-airbnb: 0 6px 16px rgba(0, 0, 0, 0.08); --ads-shadow-floating: 0 16px 48px rgba(0, 0, 0, 0.12); --ads-shadow-glow: 0 0 20px rgba(255, 79, 121, 0.25); --ads-shadow-raised: var(--ads-shadow-airbnb); --ads-shadow-overlay: var(--ads-shadow-floating); --ads-shadow-overflow: 0 8px 24px rgba(43, 108, 140, 0.12); --ads-shadow-focus: 0 0 0 3px rgba(255, 79, 121, 0.24); /* ============================================================ 8 · Motion — DS (150/300/500 ms) + Easing ============================================================ */ --ads-motion-fast: 150ms; --ads-motion-normal: 300ms; --ads-motion-slow: 500ms; --ads-ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ads-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); } /* ============================================================ Dark-Theme — zweites Token-Set (Careli-abgestimmt). Aktivierung: oder auf Container. ============================================================ */ [data-ads-theme="dark"] { --ads-color-brand: #FF6F92; --ads-color-brand-hover: #FF9AB2; --ads-color-brand-pressed: #CC0066; --ads-color-brand-subtle: rgba(255, 111, 146, 0.16); --ads-color-success: #5ED4AB; --ads-color-success-subtle: rgba(94, 212, 171, 0.14); --ads-color-success-text: #8AE8C7; --ads-color-warning: #FBBF55; --ads-color-warning-subtle: rgba(251, 191, 85, 0.14); --ads-color-warning-text: #FDD890; --ads-color-danger: #F17B91; --ads-color-danger-subtle: rgba(241, 123, 145, 0.16); --ads-color-danger-text: #FFB6C4; --ads-color-info: #75B5D2; --ads-color-info-subtle: rgba(117, 181, 210, 0.16); --ads-color-info-text: #A9D7EB; --ads-surface: #16212B; --ads-surface-sunken: #0F1720; --ads-surface-raised: #1B2935; --ads-surface-overlay: #21313F; --ads-surface-hovered: #263A49; --ads-surface-pressed: #2D4556; --ads-background: #0F1720; --ads-background-neutral: #243542; --ads-text: #E7EEF4; --ads-text-subtle: #B6C5D0; --ads-text-subtlest: #8EA4B4; --ads-text-inverse: #0F1720; --ads-text-disabled: #60798A; --ads-text-brand: #A9D7EB; --ads-text-link: #A9D7EB; --ads-border: #304451; --ads-border-bold: #496273; --ads-border-subtle: #253946; --ads-border-focused: #FF6F92; --ads-border-input: #496273; --ads-shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.30); --ads-shadow-overflow: 0 8px 24px rgba(0, 0, 0, 0.34); --ads-shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.44); }