/* Fahrplan design tokens — values verbatim from docs/design-language.md. Theme resolution: light is the base; dark applies via prefers-color-scheme unless an explicit choice overrides it (data-theme on , rendered server-side from the theme cookie — no wrong-theme flash). */ :root { /* Color: light theme */ --color-background: #F4F4F1; --color-surface: #FFFFFF; --color-surface-sunken: #ECEDE9; --color-text: #1A1C1E; --color-text-muted: #52565C; --color-line: #D8D9D4; --color-edge: #6F747B; --color-accent: #F0D722; --color-accent-wash: #FAF5D7; --color-danger: #B42318; --color-danger-wash: #FCEBE8; --color-success: #1E6A42; --color-success-wash: #E7F2EA; --color-warning: #6E5200; --color-warning-wash: #FAF0CF; --color-focus: #1A1C1E; color-scheme: light; /* Typography */ --font-display: "D-DIN Condensed", "Arial Narrow", "Helvetica Condensed", sans-serif-condensed, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Source Code Pro", Menlo, Consolas, monospace; /* Space: four-pixel base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Shape */ --radius-stamp: 4px; --radius-control: 8px; --radius-panel: 12px; /* Layout */ --content-width: 1100px; --gutter: 12px; } @media (min-width: 768px) { :root { --gutter: 24px; } } /* Dark theme values (one block, applied two ways below). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-background: #141518; --color-surface: #1C1E21; --color-surface-sunken: #24262A; --color-text: #E9EAE5; --color-text-muted: #A9ADB2; --color-line: #33363A; --color-edge: #8A8F96; --color-accent: #F0D722; --color-accent-wash: #2C2A1A; --color-danger: #F2988F; --color-danger-wash: #3A1712; --color-success: #7FCB9C; --color-success-wash: #15291D; --color-warning: #E5C95B; --color-warning-wash: #2E2812; --color-focus: #E9EAE5; color-scheme: dark; } } :root[data-theme="dark"] { --color-background: #141518; --color-surface: #1C1E21; --color-surface-sunken: #24262A; --color-text: #E9EAE5; --color-text-muted: #A9ADB2; --color-line: #33363A; --color-edge: #8A8F96; --color-accent: #F0D722; --color-accent-wash: #2C2A1A; --color-danger: #F2988F; --color-danger-wash: #3A1712; --color-success: #7FCB9C; --color-success-wash: #15291D; --color-warning: #E5C95B; --color-warning-wash: #2E2812; --color-focus: #E9EAE5; color-scheme: dark; }