/* ============================================================ g--d · DESIGN TOKENS · tokens.css Zentrale Wahrheit für Farben, Schrift, Abstände, Radien. Regel (Jens 15.6.2026): KEIN Hardcoding in Seiten-CSS. Seiten erben von hier → Default-Font/-Farbe ändern = 1 Stelle. Lead: Ra · Review: Ee · Versionierung: Git ============================================================ */ :root { /* ---- FARB-PALETTE (Braun/g--d-DNA, HSL-Tripel ohne hsl()) ---- */ --t-background: 42 25% 91%; --t-foreground: 60 4% 12%; --t-card: 42 30% 94%; --t-card-foreground: 60 4% 12%; --t-muted: 42 18% 84%; --t-muted-foreground: 40 6% 38%; --t-border: 40 12% 76%; --t-orange: 18 84% 55%; /* g--d Signal-Orange */ --t-orange-dark: 18 84% 44%; --t-olive: 45 14% 58%; --t-cream: 42 30% 94%; --t-anthracite: 60 4% 12%; /* ---- SCHRIFT ---- */ --t-font-sans: 'Inter Tight','Inter','Helvetica Neue',Helvetica,Arial,sans-serif; --t-font-mono: 'Inter Tight','Inter',ui-monospace,monospace; --t-stretch-body: 70%; /* normale Texte */ --t-stretch-tight: 64%; /* Headlines */ --t-tracking-body: -.012em; --t-tracking-tight: -.02em; /* ---- ABSTÄNDE / RADIEN / SCHATTEN ---- */ --t-radius: 14px; --t-radius-pill: 999px; --t-gap: 18px; --t-pad-panel: 18px; --t-shadow-panel: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.04), 0 2px 12px rgba(60,40,20,.08); --t-shadow-soft: 0 4px 12px rgba(244,124,32,.3); /* ---- LAYOUT ---- */ --t-wrap-max: 1280px; --t-header-h: 80px; --t-dock-h: 64px; } /* ============================================================ STYLE-SÄTZE (style_ref aus LibraryItem schaltet diese um) Eine Seite setzt z.B. . Hier können einzelne Tokens pro Welt überschrieben werden, OHNE die Seiten-Klassen anzufassen. ============================================================ */ [data-style="dreamhouse"] { /* Dreamhouse = wärmer, Jazz-Welt. Erbt Default, leicht wärmeres Orange. */ --t-orange: 20 80% 52%; } [data-style="times"] { /* g--d times = Standard-DNA, neutral. */ } [data-style="vibes"] { /* g--d vibes = Magazin, etwas kühler im Hintergrund. */ --t-background: 40 22% 92%; } /* ============================================================ BRÜCKEN-ALIASE Bestehende Seiten nutzen --background, --braun-orange etc. Diese Aliase mappen Alt-Namen → Token, damit wir Seiten schrittweise migrieren können, ohne sie sofort umzuschreiben. ============================================================ */ :root { --background: var(--t-background); --foreground: var(--t-foreground); --card: var(--t-card); --card-foreground: var(--t-card-foreground); --muted: var(--t-muted); --muted-foreground: var(--t-muted-foreground); --border: var(--t-border); --braun-orange: var(--t-orange); --braun-olive: var(--t-olive); --braun-cream: var(--t-cream); --braun-anthracite: var(--t-anthracite); --font-inter: var(--t-font-sans); } /* ============================================================ UTILITY-BASIS (optional, leichtgewichtig) ============================================================ */ .t-panel { background: hsl(var(--t-card)); border: 2px solid hsl(var(--t-border)); border-radius: var(--t-radius); box-shadow: var(--t-shadow-panel); padding: var(--t-pad-panel); } .t-pill { border: 2px solid hsl(var(--t-border)); border-radius: var(--t-radius-pill); padding: 9px 13px; background: hsl(var(--t-card)); font-size: 11px; } .t-btn-orange { border: 0; background: hsl(var(--t-orange)); color: #fff; font-weight: 800; border-radius: var(--t-radius-pill); padding: 11px 18px; cursor: pointer; box-shadow: var(--t-shadow-soft); }