/* ============================================================ Data-I Design System — Design Tokens (v1.0 · 2026-08) Kanonische Token-Definition für alle Module (TMS-I, Konfiguration, Organisation und künftig WMS, CRM, Konditionierung, BI). Themes: Standard folgt dem OS via @media (prefers-color-scheme). Der In-App-Umschalter setzt data-theme="light|dark" am - Element und überschreibt die Media-Query in beide Richtungen. Hinweis: Die Modul-Prototypen binden diese Tokens aus CSP-Gründen INLINE ein (self-contained). Diese Datei ist die Referenz/Quelle der Wahrheit und kann in gebündelten Builds via genutzt werden. ============================================================ */ :root{ color-scheme:light dark; /* Flächen / Neutrals (leicht ins Türkis/Blau gebogen — bewusst kein reines Grau) */ --canvas:#E9EDF3; /* Seitenhintergrund */ --surface:#FFFFFF; /* Karten, Panels */ --surface-2:#F4F7FA; /* Eingaben, ruhige Flächen */ --surface-3:#EDF1F6; /* gedämpfte Chips/Zellen */ --border:#E2E8F0; /* Standard-Rahmen */ --border-2:#CFD8E4; /* betonter Rahmen / Hover */ /* Text / Ink */ --ink:#101722; /* Haupttext */ --ink-2:#3C4A5C; /* Sekundärtext */ --ink-3:#66748A; /* gedämpft / Labels */ --ink-4:#97A2B4; /* schwach / Platzhalter */ /* Marke · Signatur (Türkis) + Blau als Datenstütze */ --accent:#0FB0A6; --accent-2:#0C8F87; --accent-soft:rgba(15,176,166,.12); --blue:#3B82F6; --blue-soft:rgba(59,130,246,.12); /* Semantisch — AUSSCHLIESSLICH für Status, nie Dekoration */ --ok:#16A34A; --ok-soft:rgba(22,163,74,.12); --warn:#D97706; --warn-soft:rgba(217,119,6,.14); --bad:#DC2626; --bad-soft:rgba(220,38,38,.12); --violet:#8B5CF6; --violet-soft:rgba(139,92,246,.13); /* Info / Intercompany */ /* Typografie — System-Fonts, CSP-sicher (kein CDN) */ --font-disp:"Segoe UI Variable Display","Segoe UI",-apple-system,system-ui,sans-serif; --font-ui:"Segoe UI Variable Text","Segoe UI",-apple-system,system-ui,sans-serif; --font-mono:"Cascadia Code",ui-monospace,Consolas,monospace; /* Radien */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; /* Elevation / Schatten */ --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05); --sh-md:0 10px 24px -8px rgba(16,24,40,.16),0 3px 8px -4px rgba(16,24,40,.09); --sh-lg:0 24px 60px -18px rgba(16,24,40,.28),0 8px 20px -10px rgba(16,24,40,.14); /* Motion — kurz, weich, nur transform/opacity */ --ease:cubic-bezier(.22,.61,.36,1); --e1:.16s var(--ease); } /* Dark folgt dem OS, außer der Nutzer erzwingt hell */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --canvas:#0A0D14; --surface:#111722; --surface-2:#151C29; --surface-3:#1A2331; --border:#212B3B; --border-2:#2C3A4E; --ink:#EDF1F8; --ink-2:#AEB9CB; --ink-3:#7A8699; --ink-4:#56627A; --accent:#22D3C4; --accent-2:#14B8AA; --accent-soft:rgba(34,211,196,.14); --blue:#5B9CFF; --blue-soft:rgba(91,156,255,.16); --ok:#34D399; --ok-soft:rgba(52,211,153,.14); --warn:#FBBF24; --warn-soft:rgba(251,191,36,.16); --bad:#F87171; --bad-soft:rgba(248,113,113,.15); --violet:#A78BFA; --violet-soft:rgba(167,139,250,.16); --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 12px 28px -10px rgba(0,0,0,.6); --sh-lg:0 30px 70px -20px rgba(0,0,0,.75),0 10px 24px -12px rgba(0,0,0,.55); } } /* Nutzer erzwingt Dunkel (überschreibt Media-Query) */ :root[data-theme="dark"]{ --canvas:#0A0D14; --surface:#111722; --surface-2:#151C29; --surface-3:#1A2331; --border:#212B3B; --border-2:#2C3A4E; --ink:#EDF1F8; --ink-2:#AEB9CB; --ink-3:#7A8699; --ink-4:#56627A; --accent:#22D3C4; --accent-2:#14B8AA; --accent-soft:rgba(34,211,196,.14); --blue:#5B9CFF; --blue-soft:rgba(91,156,255,.16); --ok:#34D399; --ok-soft:rgba(52,211,153,.14); --warn:#FBBF24; --warn-soft:rgba(251,191,36,.16); --bad:#F87171; --bad-soft:rgba(248,113,113,.15); --violet:#A78BFA; --violet-soft:rgba(167,139,250,.16); --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 12px 28px -10px rgba(0,0,0,.6); --sh-lg:0 30px 70px -20px rgba(0,0,0,.75),0 10px 24px -12px rgba(0,0,0,.55); } /* Zwischenmodus „Dämmerung" (dusk) — dunkel, aber aufgehellt ("nicht so dunkel"). Umgesetzt als data-theme="dark" + data-tone="soft", damit alle dark-Komponenten- regeln greifen und nur die Flächen-/Rahmen-Tokens weicher werden. Gesteuert zentral über theme.js (localStorage 'datai.mode' = light|dusk|dark). */ :root[data-theme="dark"][data-tone="soft"]{ --canvas:#24272C; --surface:#2D3137; --surface-2:#353A40; --surface-3:#3C4147; --border:#464B52; --border-2:#575D65; --ink:#F1F3F6; --ink-2:#C6CBD2; --ink-3:#99A0A9; --ink-4:#717881; --sh-sm:0 1px 2px rgba(0,0,0,.28); --sh-md:0 12px 26px -10px rgba(0,0,0,.44); --sh-lg:0 26px 60px -20px rgba(0,0,0,.54),0 8px 20px -12px rgba(0,0,0,.4); } /* Kanonische Sendungs-Status-Taxonomie (modulübergreifend): Offen=blau · Disponiert=türkis · In Durchführung=orange · Zugestellt=grün · Abgeschlossen=grau · Storniert=rot */