/* ========================================================================== tokens.css — Kaskadenordnung und sämtliche Gestaltungswerte. Farben werden einmal definiert; light-dark() liefert beide Themes aus demselben Wertesatz, gesteuert über color-scheme. ========================================================================== */ @layer tokens, base, layout, components, pages, utilities; @layer tokens { :root { /* Dunkel ist das Standard-Theme, unabhängig von der Systemeinstellung des Betriebssystems — nicht nur die Fallback-Wahl, wenn das System Dunkel bevorzugt. Erst data-theme="light" (siehe unten, vom Themenumschalter gesetzt) schaltet auf Hell um. */ color-scheme: dark; /* --- Farben ------------------------------------------------------- Jeder Wert steht zweimal: zuerst der helle Rückfallwert, dann die Fassung mit light-dark(). Browser, die light-dark() nicht kennen, verwerfen die zweite Zeile und behalten die erste — die Seite bleibt damit auch dort vollständig lesbar. */ --paper: #fbfbfa; --paper: light-dark(#fbfbfa, #0e1113); --surface: #ffffff; --surface: light-dark(#ffffff, #151a1d); --surface-sunk: #f4f4f2; --surface-sunk: light-dark(#f4f4f2, #111618); --ink: #101418; --ink: light-dark(#101418, #eceef0); --ink-soft: #374049; --ink-soft: light-dark(#374049, #c6cdd3); --muted: #5d6771; --muted: light-dark(#5d6771, #9aa3ac); --line: #e4e7ea; --line: light-dark(#e4e7ea, #242a2f); --line-strong: #cfd4da; --line-strong: light-dark(#cfd4da, #333b41); --accent: #a8471e; --accent: light-dark(#a8471e, #e08a5f); --accent-ink: #ffffff; --accent-ink: light-dark(#ffffff, #16191b); --accent-solid: #a8471e; --accent-solid: light-dark(#a8471e, #c9673c); --accent-wash: color-mix(in srgb, var(--accent) 8%, transparent); --accent-edge: color-mix(in srgb, var(--accent) 30%, transparent); /* Kühle Signal-Farbe für technische Zustände und Systembeziehungen. Kupfer bleibt der Marken- und Handlungsakzent; Blau markiert Struktur, nicht Dekoration. */ --signal: #216982; --signal: light-dark(#216982, #7ec6df); --signal-wash: color-mix(in srgb, var(--signal) 10%, transparent); --signal-edge: color-mix(in srgb, var(--signal) 34%, transparent); --overlay: rgb(16 20 24 / .72); --overlay: light-dark(rgb(16 20 24 / .72), rgb(4 6 7 / .78)); --on-image: #f4f5f6; /* --- Schrift ------------------------------------------------------ */ --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Fließende Größen — untere Schranke Mobil, obere Schranke Desktop. */ --text-display: clamp(2.75rem, 1.65rem + 4.9vw, 5.5rem); --text-h1: clamp(2.15rem, 1.55rem + 2.7vw, 3.75rem); --text-h2: clamp(1.65rem, 1.35rem + 1.35vw, 2.5rem); --text-h3: clamp(1.15rem, 1.08rem + .32vw, 1.375rem); --text-lead: clamp(1.0625rem, 1.01rem + .26vw, 1.25rem); --text-body: 1rem; --text-sm: .9375rem; --text-xs: .8125rem; --text-xxs: .625rem; --text-mono: .75rem; --leading-tight: 1.06; --leading-snug: 1.24; --leading-body: 1.65; --track-display: -.018em; --track-tight: -.022em; --track-mono: .13em; /* --- Maße --------------------------------------------------------- */ --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3.5rem; --space-2xl: clamp(4rem, 3rem + 4.5vw, 7rem); --space-3xl: clamp(5.5rem, 4rem + 6.5vw, 10rem); --container: 76rem; --container-text: 42rem; --gutter: clamp(1.25rem, .7rem + 2.6vw, 3rem); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --border: 1px solid var(--line); --line-weight-strong: 2px; --indicator-size: .5rem; --command-group-width: max-content; --architecture-node-height: 3.5rem; /* --- Höhenstaffelung ------------------------------------------------ Mehrlagige, sehr weiche Schatten statt eines einzelnen harten — ein einlagiger Schatten wirkt aufgeklebt, mehrere gestaffelte lesen sich wie echtes Licht. Im dunklen Theme fällt Schatten kaum auf, deshalb übernimmt dort ein aufgehellter Rand die Trennung. */ --shadow-sm: 0 1px 2px light-dark(rgb(16 20 24 / .04), rgb(0 0 0 / .28)), 0 2px 6px light-dark(rgb(16 20 24 / .03), rgb(0 0 0 / .22)); --shadow-md: 0 2px 4px light-dark(rgb(16 20 24 / .04), rgb(0 0 0 / .30)), 0 8px 20px light-dark(rgb(16 20 24 / .05), rgb(0 0 0 / .26)); --shadow-lg: 0 4px 8px light-dark(rgb(16 20 24 / .05), rgb(0 0 0 / .34)), 0 18px 44px light-dark(rgb(16 20 24 / .07), rgb(0 0 0 / .32)); /* --- Bewegung ----------------------------------------------------- Zwei Kurven: 'ease' für Ein- und Ausblendungen, 'ease-out' für alles, was auf eine Nutzerhandlung folgt — dort soll die Bewegung sofort schnell sein und weich auslaufen, nicht andersherum. */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 560ms; --header-h: 4.25rem; --touch-target: 2.75rem; /* Stärke der Papierkörnung. Bewusst KEIN light-dark(): Diese Funktion liefert ausschliesslich Farbwerte — für eine Zahl wie opacity ist sie ungültig, die Deklaration fällt dann stillschweigend auf 1 zurück und legt ein volldeckendes Rauschen über die Seite. Deshalb hier zwei getrennte Werte nach demselben Muster wie beim Themenumschalter. Dunkel ist der Grundwert, weil Dunkel das Standard-Theme ist. */ --grain: .05; } :root[data-theme="light"] { --grain: .03; } /* Manuelle Umschaltung: data-theme="light" ist die einzige Abweichung vom dunklen Grundzustand. data-theme="dark" existiert nur, damit ein Klick zurück zu Dunkel dieselbe explizite Markierung hinterlässt wie der Wechsel zu Hell — inhaltlich deckt es sich mit dem Grundzustand. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Bewegung ist eine Zugabe, keine Voraussetzung. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } } }