/* ============================================================ 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()) ---- */ /* HINWEIS 260727: --t-background/--t-foreground/--t-card/--t-card-foreground/ --t-muted/--t-muted-foreground/--t-border wurden hier entfernt (waren tote Werte, ueberschrieben von gdti-tokens.css das auf allen Seiten NACH dieser Datei laedt). Einzige Quelle fuer diese 7 Werte jetzt: gdti-tokens.css. */ --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. ============================================================ */ /* 260730 Ee (Ra-Absprache, Research-Entity 2100): --t-background/--t-card/--t-muted/--t-border nur noch aktiv wenn KEIN data-theme (Mood-System) auf sitzt -- vervollstaendigt Ras 260727-Absicht ("einzige Quelle: gdti-tokens.css"), die hier im data-style-Block noch fehlte und auf allen Mood-Theme-Seiten die Karten-/Textfarbe sitewide auf einen Fixwert zwang (Themes verloren ihre Farbidentitaet). Signalfarben (orange/olive/cream) bleiben unveraendert Welt-spezifisch, kein Konflikt mit dem Mood-System. Seiten OHNE data-theme (z.B. Altseiten) verhalten sich unveraendert wie vorher. */ html:not([data-theme]) [data-style="dreamhouse"], html:not([data-theme]) body[data-style="dreamhouse"] { --t-background: 28 38% 80%; --background: 28 38% 80%; --t-card: 32 40% 90%; --card: 32 40% 90%; --t-muted: 30 26% 76%; --muted: 30 26% 76%; --t-border: 28 22% 66%; --border: 28 22% 66%; } [data-style="dreamhouse"], body[data-style="dreamhouse"] { --t-orange: 22 84% 48%; --braun-orange: 22 84% 48%; --t-orange-dark: 22 84% 38%; --t-olive: 48 24% 46%; --braun-olive: 48 24% 46%; --t-cream: 32 40% 90%; --braun-cream: 32 40% 90%; } html:not([data-theme]) [data-style="times"], html:not([data-theme]) body[data-style="times"] { --t-background: 40 16% 96%; --background: 40 16% 96%; --t-card: 0 0% 100%; --card: 0 0% 100%; --t-muted: 40 12% 90%; --muted: 40 12% 90%; --t-border: 40 10% 82%; --border: 40 10% 82%; } [data-style="times"], body[data-style="times"] { --t-orange: 16 88% 52%; --braun-orange: 16 88% 52%; --t-orange-dark: 16 88% 42%; } html:not([data-theme]) [data-style="vibes"], html:not([data-theme]) body[data-style="vibes"] { --t-background: 200 18% 90%; --background: 200 18% 90%; --t-card: 200 24% 97%; --card: 200 24% 97%; --t-muted: 200 14% 84%; --muted: 200 14% 84%; --t-border: 200 12% 78%; --border: 200 12% 78%; --t-foreground: 210 12% 16%; --foreground: 210 12% 16%; } [data-style="vibes"], body[data-style="vibes"] { --t-orange: 12 86% 54%; --braun-orange: 12 86% 54%; --t-orange-dark: 12 86% 44%; } /* ============================================================ 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); }