/* * Traumascript – Design-Tokens * ---------------------------- * Farbsystem des Redesigns nach docs/ux-concept.md §3.1. * Basis sind drei Farben: Off-White #FDFBF7, Schiefer #2C3237, Salbei #8A9A86. * Alle weiteren Werte sind daraus abgeleitet, weil die drei allein kein * zugängliches System ergeben: Salbei erreicht als Text auf Off-White nur * 2,88:1 und ist deshalb ausschließlich Flächen- und Dekorfarbe. * * Jeder Kontrastwert in den Kommentaren ist gerechnet, nicht geschätzt – * nachprüfbar mit `php tools/contrast.php > docs/KONTRAST.md`. * * Die Benennung bleibt so, dass sie 1:1 in WordPress theme.json * (settings.color.palette, settings.typography, settings.spacing) und in die * Kadence Global Palette übernommen werden kann (tools/build-seed.php). */ :root { /* ---------- Kernfarben (Vorgabe) ---------- */ --color-paper: #FDFBF7; /* Off-White – Seitenhintergrund */ --color-ink: #2C3237; /* Schiefer/Dunkelholz – Fließtext, 12,55:1 auf Papier */ --color-sage: #8A9A86; /* Salbei – NUR Fläche und Dekor, nie Text (2,88:1) */ /* ---------- Abgeleitete Farben (gemessen) ---------- */ --color-ink-soft: #5A6167; /* Meta, Lesezeit, Bildunterschriften – 6,08:1 auf Papier */ --color-ink-quiet: #434A50; /* Zitate, Listen in Serif – 8,71:1 auf Papier */ --color-sage-text: #57684F; /* Salbei als Text: Links, Labels – 5,81:1 auf Papier */ --color-sage-deep: #4F5E4C; /* gefüllte Buttons – Off-White darauf 6,69:1 */ --color-sage-deep-hover: #3E4C3B; /* Button-Hover – Off-White darauf 8,83:1 */ --color-sage-tint: #DCE1D8; /* Bandflächen, Filterleiste – Ink darauf 9,77:1 */ --color-sage-veil: #EBEEE8; /* leiseste Tönung, Karten-Hover – Ink darauf 11,08:1 */ --color-sage-light: #B4BFB0; /* Salbei auf Schiefer – 6,81:1 */ --color-slate-deep: #2C3237; /* dunkle Bänder, Footer – Papier darauf 12,55:1 */ --color-slate-line: #454E55; /* dekorative Linie auf Schiefer (1,53:1, ohne WCAG-Pflicht) */ --color-paper-2: #F6F7F3; /* zweite helle Fläche – Ink darauf 12,06:1 */ --color-line-ui: #767D72; /* Rahmen von Bedienelementen – 4,11:1 Papier / 3,19:1 Tint */ --color-line-soft: #D2D6CE; /* dekorative Haarlinie, nur auf Papier */ /* * Fokusindikator: Es gibt keine Einzelfarbe, die auf allen vier Flächen * (Papier, Tint, Salbei, Schiefer) 3:1 erreicht – Schiefer schafft * 12,55 / 9,77 / 4,35, aber 1,00 auf sich selbst. Deshalb ein zweifarbiger * Ring aus Kern und Halo in Gegenfarbe (WCAG 2.2, 2.4.11/2.4.13). * Die Umkehr auf dunklen Flächen setzt site.css über .section--slate/.band-sage. */ --focus-core: #2C3237; --focus-halo: #FDFBF7; /* --------------------------------------------------------------- * Kompatibilitätsschicht * --------------------------------------------------------------- * site.css und blocks.css verwenden an 329 Stellen die Tokennamen des * Vorgänger-Designs (Terracotta/Sand/Oliv). Statt diese Regeln in Phase 1 * blind umzuschreiben, zeigen die alten Namen hier auf die neuen Werte: * jede bestehende Regel übernimmt die neue Palette, ohne angefasst zu werden. * * Neue Komponenten verwenden ausschließlich die kanonischen Namen oben. * Diese Schicht wird in Phase 2 aufgelöst, sobald site.css migriert ist. * --------------------------------------------------------------- */ --color-ink-warm: var(--color-ink); /* Überschriften */ --color-terracotta: var(--color-sage-deep); /* Buttonflächen */ --color-terracotta-deep: var(--color-sage-deep-hover); --color-terracotta-text: var(--color-sage-text); /* Textlinks */ --color-terracotta-light: var(--color-sage-light); /* Links auf dunklem Grund */ --color-sand: var(--color-sage-tint); /* Linien, Text auf dunkler Fläche */ --color-surface: var(--color-sage-veil); /* Feature-Bänder, Footer */ --color-surface-2: var(--color-sage-tint); /* Karten auf Fläche */ --color-surface-line: var(--color-line-soft); --color-greige: var(--color-ink-soft); /* Labels, Meta */ --color-greige-brand: var(--color-sage); /* Dekor, Logo-Umfeld */ --color-input-border: var(--color-line-ui); --color-olive: var(--color-slate-deep); /* dunkle Bänder */ --color-olive-line: var(--color-slate-line); --color-olive-text: var(--color-sage-tint); /* 9,77:1 auf Schiefer */ --color-olive-muted: var(--color-sage-light); /* 6,81:1 auf Schiefer */ --color-olive-soft: #C8D0C4; /* 8,20:1 auf Schiefer */ --color-cream: var(--color-paper); --color-logo: var(--color-ink); --color-focus: var(--focus-core); --color-brick: var(--color-slate-deep); /* Audiothek-Band → Schiefer */ --color-brick-soft: var(--color-sage-light); --color-brick-muted: var(--color-sage-tint); --color-brick-line: var(--color-slate-line); /* ---------- Typografie ---------- */ --font-serif: "EB Garamond", Georgia, "Times New Roman", serif; --font-sans: "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Arial, sans-serif; /* Vorgabe: H1 56/46/36 · H2 40/34/30 · H3 30/26/24 · Fließtext 20/19/18 (Desktop/Tablet/Mobil) */ --text-h1: clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem); --text-h2: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); --text-h3: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); --text-h4: 1.25rem; --text-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); --text-body-s: 1.125rem; /* 18px */ --text-lede: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-quote: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); --text-small: 1rem; /* 16px – keine Schriftgröße darunter (ux-concept §3.2) */ --text-tiny: 1rem; /* vormals 14px; auf 16px angehoben */ --text-label: 0.8125rem; /* 13px Versal-Label */ --text-display: clamp(3.5rem, 9vw, 8rem); --leading-tight: 1.15; --leading-snug: 1.25; --leading-normal: 1.4; --leading-body: 1.7; /* vormals 1.65 – längerer Zeilenabstand, ux-concept §3.2 */ --tracking-label: 0.16em; /* vormals 0.22em – zerriss deutsche Versalwörter */ /* ---------- Abstände ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-section: clamp(5rem, 3.5rem + 5vw, 9rem); /* angehoben, ux-concept §3.3 */ --space-section-s: clamp(3rem, 2rem + 3vw, 5rem); --space-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); /* ---------- Raster ---------- */ --width-max: 80rem; /* 1280px */ --width-text: 42rem; /* Lesebreite Artikel */ --width-wide: 60rem; --gutter: clamp(1.5rem, 4vw, 2.5rem); --grid-gap: clamp(2rem, 4vw, 6rem); /* ---------- Sonstiges ---------- */ --header-h: 7rem; --header-h-mobile: 5.5rem; --radius-pill: 999px; --radius-s: 2px; --transition: 180ms ease; --transition-slow: 700ms ease; --z-header: 40; --z-overlay: 50; }