/* ========================================================================== tokens.css — Design-Tokens von Lumina -------------------------------------------------------------------------- Einzige Quelle der Wahrheit für Farben, Typografie, Abstände, Radien und Bewegung. Alle anderen Stylesheets greifen ausschließlich auf diese Variablen zu — es werden nirgends sonst Hex-Werte notiert. Themes: Standard ist hell. Der Dark-Mode wird über das Attribut `data-theme="dark"` am -Element aktiviert (gesetzt von js/ui/theme.js). ========================================================================== */ :root { /* --- Farbpalette: warm, gedämpft, kontrastsicher (AA für Text) --------- */ --c-bg: #f7f0e6; /* Cream — Seitenhintergrund */ --c-bg-sunk: #efe5d7; /* leicht tiefer liegende Flächen */ --c-surface: #fffaf3; /* Karten, Sheets */ --c-surface-2: #f2eade; /* zweite Kartenebene, Chips im Ruhezustand */ --c-border: #e2d6c4; /* Trennlinien, Chip-Rahmen */ --c-text: #3a332c; /* Haupttext — warmes Dunkelbraun */ --c-text-soft: #6d6255; /* Sekundärtext, Labels */ --c-text-faint: #93877a; /* Metadaten, Zeitangaben */ --c-sage: #7f9a7c; /* Salbeigrün — Ruhe, Bestätigung */ --c-sage-soft: #dfe8dc; /* Salbei-Fläche für aktive Chips */ --c-clay: #c47a5c; /* Terracotta — Akzent, primäre Aktion */ --c-clay-soft: #f6e0d4; /* Terracotta-Fläche */ --c-honey: #d9a441; /* Honiggelb — "Licht", Signature-Element */ --c-focus: #4a6f8a; /* Fokusring — bewusst kühl, gut sichtbar */ --c-danger: #a9553f; /* Löschen, destruktive Aktionen */ /* --- Höhen / Schatten: sehr weich, nie hart ---------------------------- */ --shadow-sm: 0 1px 2px rgb(58 51 44 / 6%); --shadow-md: 0 6px 20px rgb(58 51 44 / 8%); --shadow-lg: 0 -8px 28px rgb(58 51 44 / 10%); --glow: 0 0 0 6px rgb(217 164 65 / 18%); /* --- Typografie ------------------------------------------------------- */ /* Bewusst systemeigene Schriften: Die App muss offline vollständig funktionieren, deshalb keine Webfont-Downloads. */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-xs: 0.78rem; --fs-sm: 0.9rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --lh-tight: 1.2; --lh-normal: 1.55; /* --- Abstände (4px-Raster) -------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; /* --- Radien: durchgängig weich ---------------------------------------- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; /* --- Bewegung --------------------------------------------------------- */ --t-fast: 120ms; --t-base: 240ms; --t-slow: 480ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- Layout ----------------------------------------------------------- */ --w-content: 34rem; /* Mobile-First, auf Desktop zentriert */ --touch-min: 48px; /* Mindestgröße für Touch-Ziele */ } /* --- Dark-Mode: weiches Dunkelblau-Grau, kein reines Schwarz -------------- */ [data-theme="dark"] { --c-bg: #1d2024; --c-bg-sunk: #191c1f; --c-surface: #262a2f; --c-surface-2: #2e3339; --c-border: #3a4047; --c-text: #ece5db; --c-text-soft: #b8afa3; --c-text-faint: #8d8478; --c-sage: #9cba98; --c-sage-soft: #33403a; --c-clay: #dc9873; --c-clay-soft: #40312a; --c-honey: #e8bd66; --c-focus: #8fb8d4; --c-danger: #e08d76; --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow-md: 0 6px 20px rgb(0 0 0 / 34%); --shadow-lg: 0 -8px 28px rgb(0 0 0 / 38%); --glow: 0 0 0 6px rgb(232 189 102 / 16%); }