/* * studyinthe.eu — Design Tokens * Quelle/Rationale: docs/design/system.md (Abschnitte 4–7) * Schreibrecht: docs/design/ (Sonnet-Design, CONTRACT.md §5) * * Theming-Strategie (drei Ebenen, robust gegen System-Einstellung + manuellen Toggle): * 1. Basiswerte (Light) auf blankem :root * 2. Dark-Override via prefers-color-scheme, NUR wenn kein manueller Toggle aktiv ist * ( :root:not([data-theme="light"]) verhindert, dass System-Dark einen expliziten * Light-Toggle überstimmt ) * 3. Dark-Override via [data-theme="dark"] (manueller Toggle gewinnt in beide Richtungen) * * Codex: erhält data-theme="light" | "dark" nur, wenn Nutzer:in aktiv umschaltet; * ohne Toggle bleibt das Attribut weg und Schritt 2 (System-Präferenz) greift. * * WCAG-Kontrastnachweise für jede Farbkombination unten: docs/design/system.md Abschnitt 5. * Prüfformel (falls neue Kombination nötig wird): * L = 0.2126*R + 0.7152*G + 0.0722*B (R,G,B linearisiert: c<=0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4) * Kontrast = (L_hell + 0.05) / (L_dunkel + 0.05) → Ziel: >= 4.5 (Normal-Text), >= 3 (Large-Text/Non-Text-UI) */ :root { /* ---------- Farbe: Light (Basiswert) ---------- */ --color-bg: #FAF8F3; --color-surface: #FFFFFF; --color-surface-alt: #F3EEE4; --color-ink: #1A1815; --color-ink-muted: #5B5647; --color-border: #E2DACB; --color-border-strong: #948A6E; --color-primary: #0E5F5A; --color-primary-hover: #0B4A46; --color-on-primary: #FFFFFF; /* Field-guide surfaces: the teal band anchors the editorial rhythm. */ --color-band: #0E5F5A; --color-band-deep: #0A3733; --color-on-band: #FAF8F3; --color-on-band-muted: #C7DED8; --color-band-pattern: rgba(250, 248, 243, 0.16); --color-body-deco: rgba(181, 80, 46, 0.035); --color-accent: #B5502E; --color-accent-hover: #973F22; --color-on-accent: #FFFFFF; --color-success: #1F5138; --color-success-bg: #E1F0E6; --color-warning: #7A4A0C; --color-warning-bg: #FBEBD2; --color-danger: #8B2620; --color-danger-bg: #F7E1DE; --color-focus: #0E5F5A; --color-link-visited: #6B4A73; /* Schatten: warmton-transparent (Ink-Farbe als Basis, nicht neutrales Schwarz) */ --shadow-color: 26, 24, 21; --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.08), 0 1px 1px rgba(var(--shadow-color), 0.04); --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.10), 0 2px 4px rgba(var(--shadow-color), 0.06); /* ---------- Typografie ---------- */ --font-family-serif: "Literata", "Literata Fallback", Georgia, "Times New Roman", serif; --font-family-sans: "Work Sans", "Work Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-size-xs: 0.75rem; /* 12px – Footnote-Ziffern, Zeitstempel */ --font-size-sm: 0.875rem; /* 14px – Tabellenzellen, Captions */ --font-size-base: 1rem; /* 16px – UI-Text, Formulare */ --font-size-md: 1.125rem; /* 18px – Artikel-Fließtext */ --font-size-lg: 1.375rem; /* 22px – Lead/Dek, H4 */ --font-size-xl: 1.75rem; /* 28px – H3 */ --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); /* H2 */ --font-size-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 3rem); /* H1 / Guide-Titel */ --font-size-4xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem); /* Hero (Homepage) */ --line-height-tight: 1.15; /* Überschriften groß */ --line-height-snug: 1.3; /* Überschriften klein, Card-Titel */ --line-height-normal: 1.5; /* UI-Text (Work Sans) */ --line-height-relaxed: 1.6; /* Artikel-Fließtext (Literata) */ --letter-spacing-tight: -0.01em; /* große Display-Headlines */ --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* Eyebrows, Tags */ --letter-spacing-wider: 0.08em; /* UPPERCASE Mikro-Labels */ --measure-article: 66ch; /* optimale Zeilenlänge Fließtext */ --container-max: 1280px; /* Seitenraster: Karten-Grids, Vergleichstabellen */ /* ---------- Abstand (4px-Basis) ---------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* ---------- Radius ---------- */ --radius-sm: 4px; /* Inputs, Buttons, Chips */ --radius-md: 8px; /* Karten */ --radius-lg: 14px; /* große Panels (Sticky-ToC, Modale) */ --radius-full: 999px; /* Pills/Badges */ /* ---------- Motion ---------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---------- Z-Index-Skala ---------- */ --z-dropdown: 10; /* Sprachumschalter-Menü */ --z-sticky: 20; /* Sticky-ToC, Sticky-Tabellenkopf/-erste-Spalte */ --z-header: 30; /* Seitenkopf */ --z-overlay: 40; --z-toast: 60; /* Newsletter-Formular Erfolgs-/Fehlermeldung, falls als Toast */ } /* * Referenz-Breakpoints (als Werte dokumentiert, nicht als funktionale Custom Properties – * `@media (min-width: var(--bp-md))` wird nicht zuverlässig unterstützt; in implementation-notes.md * und Komponenten-CSS als Literalwerte verwenden): * --bp-sm: 480px (große Phones) * --bp-md: 768px (Tablet – Vergleichstabelle kann von Card-Stack auf Scroll-Tabelle wechseln) * --bp-lg: 1024px (kleines Notebook – ToC wird Sidebar statt
) * --bp-xl: 1280px (Desktop – Container-Max erreicht) * --bp-2xl: 1440px (breiter Desktop) */ /* ---------- Dark: automatisch nach System-Präferenz (nur ohne manuellen Light-Toggle) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #16140F; --color-surface: #201D16; --color-surface-alt: #2A2519; --color-ink: #F2EEE3; --color-ink-muted: #B6AD9B; --color-border: #3B3527; --color-border-strong: #776C4E; --color-primary: #5FCFC5; --color-primary-hover: #4FB8AF; --color-on-primary: #0B1F1D; --color-band: #0A3733; --color-band-deep: #062825; --color-on-band: #F2EEE3; --color-on-band-muted: #B8D5D0; --color-band-pattern: rgba(242, 238, 227, 0.13); --color-body-deco: rgba(231, 161, 94, 0.04); --color-accent: #E7A15E; --color-accent-hover: #EEB077; --color-on-accent: #0B1F1D; --color-success: #8FE0B4; --color-success-bg: #1E3B2C; --color-warning: #F0C988; --color-warning-bg: #3A2C12; --color-danger: #F2A79C; --color-danger-bg: #3B1E1B; --color-focus: #5FCFC5; --color-link-visited: #C9A9D1; --shadow-color: 0, 0, 0; /* auf dunklem Grund neutrales Schwarz statt warmer Ink-Ton, sonst zu milchig */ } } /* ---------- Dark: manueller Toggle gewinnt in beide Richtungen ---------- */ :root[data-theme="dark"] { --color-bg: #16140F; --color-surface: #201D16; --color-surface-alt: #2A2519; --color-ink: #F2EEE3; --color-ink-muted: #B6AD9B; --color-border: #3B3527; --color-border-strong: #776C4E; --color-primary: #5FCFC5; --color-primary-hover: #4FB8AF; --color-on-primary: #0B1F1D; --color-band: #0A3733; --color-band-deep: #062825; --color-on-band: #F2EEE3; --color-on-band-muted: #B8D5D0; --color-band-pattern: rgba(242, 238, 227, 0.13); --color-body-deco: rgba(231, 161, 94, 0.04); --color-accent: #E7A15E; --color-accent-hover: #EEB077; --color-on-accent: #0B1F1D; --color-success: #8FE0B4; --color-success-bg: #1E3B2C; --color-warning: #F0C988; --color-warning-bg: #3A2C12; --color-danger: #F2A79C; --color-danger-bg: #3B1E1B; --color-focus: #5FCFC5; --color-link-visited: #C9A9D1; --shadow-color: 0, 0, 0; } /* Basis-Anwendung (Codex kann dies in globales Stylesheet übernehmen oder äquivalent selbst setzen) */ html { background: var(--color-bg); color: var(--color-ink); color-scheme: light dark; } body { font-family: var(--font-family-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); background: var(--color-bg); color: var(--color-ink); } /* * ---------- Self-hosted Fonts ---------- * Pfadkonvention (Vorschlag, an tatsächliche Build-Struktur anpassbar): /assets/fonts//… * Kritische Schnitte self-hosted: Literata mit regulär/halbfett/fett sowie kursiv regulär; * Work Sans als Variable Font (eine Datei statt mehrerer Static-Weight-Sätze). * Zeichensatz MUSS latin + latin-ext abdecken (siehe system.md §6.2 – Diakritika in 27 Länder-Guides, * deutsche Umlaute). Kein reines "latin"-Subset verwenden. */ @font-face { font-family: "Literata"; src: url("/assets/fonts/literata/Literata-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F; /* latin + latin-ext + gängige Interpunktion */ } @font-face { font-family: "Literata"; src: url("/assets/fonts/literata/Literata-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F; } @font-face { font-family: "Literata"; src: url("/assets/fonts/literata/Literata-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F; } @font-face { font-family: "Literata"; src: url("/assets/fonts/literata/Literata-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F; } @font-face { font-family: "Work Sans"; src: url("/assets/fonts/work-sans/WorkSans-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F; } /* * Metric-angepasste Fallback-Fonts (reduzieren CLS beim Swap von Fallback → Webfont). * Startwerte, siehe system.md §6.2 — vor Produktivsetzung mit den final eingebundenen * Font-Dateien gegen echte Metriken feinjustieren (z. B. via Kapitälchen-/x-Höhen-Vergleich * der ausgelieferten Schnitte gegen Georgia/Arial in der Zielumgebung). */ @font-face { font-family: "Literata Fallback"; src: local("Georgia"); size-adjust: 106%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: "Work Sans Fallback"; src: local("Arial"); size-adjust: 106%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } /* Optische Größe an gerenderte Schriftgröße koppeln (Literata wurde für dieses Verhalten entworfen) */ .font-serif, [class*="prose"] { font-optical-sizing: auto; } /* Zahlen in Tabellen/Datenboxen: bündige, gleich breite Ziffern */ .tabular-nums, table td.numeric, .data-box__value { font-variant-numeric: tabular-nums lining-nums; } /* Bewegungsreduktion respektieren (siehe system.md §7) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }