/* ========================================================================== Automagio – tokens.css Die einzige Stelle, an der Farben, Schriftgrößen, Abstände und Radien definiert werden. Alle anderen Stylesheets nutzen ausschließlich diese Variablen. Hell/Dunkel: jede Farbe ist mit light-dark(hell, dunkel) definiert. - ohne Cookie folgt die Seite der Systemeinstellung (color-scheme: light dark) - erzwingt einen Modus (per app.js + Cookie am_theme) Alle Textfarben erfüllen auf ihren Flächen mindestens WCAG AA (4,5:1). ========================================================================== */ :root { color-scheme: light dark; /* Schrift: Systemschrift, nichts wird nachgeladen */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Markenfarbe Indigo-Blau */ --c-primary: light-dark(#2F4BD8, #8090FF); --c-primary-hover: light-dark(#2438A8, #98A6FF); --c-primary-soft: light-dark(#E9ECFB, #232A4D); --c-on-primary: light-dark(#FFFFFF, #0F1117); /* Akzent Teal: nur für "aktiv" / laufende Agents */ --c-accent: light-dark(#0F6E56, #5DCAA5); --c-accent-soft: light-dark(#E1F5EE, #0B3A30); /* Statusfarben */ --c-success: light-dark(#15803D, #4ADE80); --c-success-soft: light-dark(#E7F6EC, #0E3A22); --c-warning: light-dark(#B45309, #FBBF24); --c-warning-soft: light-dark(#FEF3E2, #3D2A08); --c-danger: light-dark(#B91C1C, #F87171); --c-danger-soft: light-dark(#FDECEC, #421616); /* Neutrale Flächen und Text */ --bg: light-dark(#F6F7FB, #0F1117); --surface: light-dark(#FFFFFF, #171A23); --surface-2: light-dark(#F1F3F8, #1E2230); --border: light-dark(#E2E5EE, #2A2F3D); --border-strong: light-dark(#C9CEDB, #3A4052); --text: light-dark(#1A1F36, #E8EAF0); --text-2: light-dark(#5B6478, #A0A7B8); --text-3: light-dark(#6B7389, #8B93A7); /* Schatten: nur für schwebende Elemente (Dropdown, Toast) */ --shadow-pop: light-dark(0 8px 24px rgba(26, 31, 54, 0.12), 0 8px 24px rgba(0, 0, 0, 0.5)); --focus: 0 0 0 3px light-dark(rgba(47, 75, 216, 0.28), rgba(128, 144, 255, 0.4)); /* Radien */ --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-xl: 14px; /* Abstände (4er-Raster) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; /* Schriftgrößen */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; /* Layoutmaße */ --container: 1200px; --header-h: 64px; --topbar-h: 60px; --rail-w: 56px; --rail-w-open: 224px; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; }