/* ============================================================================ Design Tokens — einzige Quelle für Farbe, Schrift, Abstand, Radius, Zeit. Regel: Kein Wert in components.css oder screens.css, der hier nicht steht. Dokumentation: docs/design/design-system.md Aufbau in drei Schichten, seit 5.9.2026: 1. ROLLEN --bg, --surface, --text … wechseln mit dem Modus 2. MODUS hell ist der Grundzustand, dunkel überschreibt 3. GENRE setzt nur --accent; alles andere bleibt gleich Die alten Namen (--c-ink-900 …) zeigen am Ende der Datei auf die Rollen. Sie bleiben gültig, damit kein Screen angefasst werden muss. ========================================================================== */ :root { /* --- 1. Rollen, heller Grund ------------------------------------------- Warmes Papier, kein Klinikweiss. Die App wird draussen bei Tageslicht bedient — dort gewinnt Hell, siehe Design-System, Abschnitt Farbe. */ --paper: #f5f2ec; /* Papier ohne Farbe — Ausgangspunkt der Mischung */ --paper-2: #fdfbf7; --bg: color-mix(in srgb, var(--accent) 6%, var(--paper)); /* Seitengrund */ --bg-2: color-mix(in srgb, var(--accent) 9%, #efebe2); /* Verlauf oben */ --surface: color-mix(in srgb, var(--accent) 3%, var(--paper-2)); /* Flächen, Karten */ --surface-2: color-mix(in srgb, var(--accent) 8%, #ecead9); /* erhöhte Flächen */ --line: color-mix(in srgb, var(--accent) 12%, #dcd6ca); /* Linien, Trenner */ --line-strong: color-mix(in srgb, var(--accent) 16%, #b6ae9f); /* Rahmen im Hover */ --text: #1a181d; /* Fliesstext 15.6:1 auf --bg */ --text-2: #403c46; /* Sekundärtext 9.5:1 */ --text-3: #5d5860; /* Tertiärtext 6.1:1 */ --text-4: #6b665e; /* Fussnoten, Metadaten 5.1:1 */ --accent: #ad3f38; /* wird vom Genre überschrieben, s. unten */ --accent-hi: color-mix(in srgb, var(--accent) 85%, #000); --accent-dim: color-mix(in srgb, var(--accent) 40%, var(--bg)); --accent-soft: color-mix(in srgb, var(--accent) 18%, #fff); --accent-ink: #ffffff; /* Schrift auf Akzentfläche */ --c-signal-warn: #8a6516; --c-signal-ok: #3f6b4d; --c-warn-bg: #f7edd6; --c-warn-fg: #6b4e12; color-scheme: light; } /* --- 2. Dunkler Grund ---------------------------------------------------- Gleiche Rollen, andere Werte. Der Modus folgt dem Gerät; `data-theme` am gewinnt immer, damit der Gast in der Sonne umschalten kann. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: color-mix(in srgb, var(--accent) 4%, #0d0c0f); --bg-2: color-mix(in srgb, var(--accent) 6%, #131118); --surface: color-mix(in srgb, var(--accent) 4%, #15141a); --surface-2: color-mix(in srgb, var(--accent) 6%, #1e1c24); --line: #302d38; --line-strong: #4a4654; --text: #e9e4da; --text-2: #c6c0b6; --text-3: #a49e94; --text-4: #8b857c; --accent-hi: color-mix(in srgb, var(--accent) 85%, #fff); --accent-dim: color-mix(in srgb, var(--accent) 55%, var(--bg)); --accent-soft: color-mix(in srgb, var(--accent) 40%, #fff); --accent-ink: #14121a; --c-signal-warn: #c9973f; --c-signal-ok: #5c8c6a; --c-warn-bg: #1a160f; --c-warn-fg: #d8c9a6; color-scheme: dark; } } :root[data-theme="dark"] { --bg: color-mix(in srgb, var(--accent) 4%, #0d0c0f); --bg-2: color-mix(in srgb, var(--accent) 6%, #131118); --surface: color-mix(in srgb, var(--accent) 4%, #15141a); --surface-2: color-mix(in srgb, var(--accent) 6%, #1e1c24); --line: #302d38; --line-strong: #4a4654; --text: #e9e4da; --text-2: #c6c0b6; --text-3: #a49e94; --text-4: #8b857c; --accent-hi: color-mix(in srgb, var(--accent) 85%, #fff); --accent-dim: color-mix(in srgb, var(--accent) 55%, var(--bg)); --accent-soft: color-mix(in srgb, var(--accent) 40%, #fff); --accent-ink: #14121a; --c-signal-warn: #c9973f; --c-signal-ok: #5c8c6a; --c-warn-bg: #1a160f; --c-warn-fg: #d8c9a6; color-scheme: dark; } /* --- 3. Genre-Farben ---------------------------------------------------- Je Modus einmal definiert, damit sie sich auch einzeln verwenden lassen — die Genre-Liste zeigt alle sieben Zeichen gleichzeitig, jedes in seiner eigenen Farbe. Alle Werte sind gegen --bg und --surface in beiden Modi nachgerechnet und liegen ueber 4.5:1. Auf hellem Grund gilt der satte Wert, auf dunklem der aufgehellte — dieselbe Farbe wirkt auf schwarzem Grund sonst stumpf. */ :root { --g-true_crime: #ad3f38; --g-historisch: #7e6033; --g-kulinarisch: #636b31; --g-abenteuer: #2b6f72; --g-sportlich: #2f6390; --g-familie: #8d4d84; --g-sagen: #6a4a9c; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-true_crime: #d15c53; --g-historisch: #c1934f; --g-kulinarisch: #9aa551; --g-abenteuer: #4a9fa2; --g-sportlich: #5b9ad0; --g-familie: #cc82c0; --g-sagen: #9c81d8; } } :root[data-theme="dark"] { --g-true_crime: #d15c53; --g-historisch: #c1934f; --g-kulinarisch: #9aa551; --g-abenteuer: #4a9fa2; --g-sportlich: #5b9ad0; --g-familie: #cc82c0; --g-sagen: #9c81d8; } /* Ein Genre setzt genau eine Farbe — modusunabhaengig, weil die Werte oben schon je Modus stehen. */ :root[data-genre="true_crime"] { --accent: var(--g-true_crime); } :root[data-genre="historisch"] { --accent: var(--g-historisch); } :root[data-genre="kulinarisch"] { --accent: var(--g-kulinarisch); } :root[data-genre="abenteuer"] { --accent: var(--g-abenteuer); } :root[data-genre="sportlich"] { --accent: var(--g-sportlich); } :root[data-genre="familie"] { --accent: var(--g-familie); } :root[data-genre="sagen"] { --accent: var(--g-sagen); } /* --- Altnamen ----------------------------------------------------------- Die Verwendungen in base/components/screens greifen weiter. Neuer Code nimmt die Rollen oben; diese Liste darf schrumpfen, nie wachsen. */ :root { --c-ink-900: var(--bg); --c-ink-800: var(--bg-2); --c-ink-700: var(--surface); --c-ink-600: var(--surface-2); --c-ink-500: var(--line); --c-ink-400: var(--line-strong); --c-bone-100: var(--text); --c-bone-200: var(--text-2); --c-bone-300: var(--text-3); --c-bone-400: var(--text-4); --c-accent: var(--accent); --c-accent-hi: var(--accent-hi); --c-accent-dim: var(--accent-dim); } :root { /* --- Typografie -------------------------------------------------------- Serif für alles Erzählerische, Sans für alles Bedienbare. Die Trennung ist die Aussage: Text ist Inhalt, UI ist Werkzeug. */ --f-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --f-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; --t-display: 34px; --t-display-lh: 1.1; --t-title: 24px; --t-title-lh: 1.2; --t-heading: 19px; --t-heading-lh: 1.3; --t-narrate: 16.5px; --t-narrate-lh: 1.62; /* Lesetext im Player */ --t-body: 15px; --t-body-lh: 1.55; --t-ui: 13.5px; --t-meta: 12px; --t-micro: 11px; --track-eyebrow: .16em; --track-chip: .1em; /* --- Raster ------------------------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 56px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 16px; --r-pill: 99px; /* --- Layout ------------------------------------------------------------ */ --w-app: 520px; /* Der Player ist ein Handformat, auch am Desktop */ --h-topbar: 49px; --h-sheet: 46vh; --h-sheet-tall: 74%; /* 82% liess 18% Karte uebrig — zu wenig (Feldtest 7.9.2026) */ --z-map: 1; --z-hud: 10; --z-sheet: 20; --z-bar: 30; --z-top: 40; --z-fab: 60; --z-drawer: 70; --z-toast: 80; /* --- Bewegung ---------------------------------------------------------- Zurückhaltend. Nichts hüpft, nichts blinkt. */ --m-fast: .15s; --m-base: .25s; --m-slow: .3s; --m-ease: cubic-bezier(.4, 0, .2, 1); /* --- Touch ------------------------------------------------------------- 44px Mindestziel. Die App wird im Gehen bedient, oft einhändig, oft in der Sonne. Kleiner geht nicht. */ --hit-min: 44px; } /* Bewegungsreduktion respektieren — nicht optional, sondern Zugänglichkeit. */ @media (prefers-reduced-motion: reduce) { :root { --m-fast: .01s; --m-base: .01s; --m-slow: .01s; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }