/* ============================================================ tth-redesign.css — "Taste the Heights OS" Look-Shim Version: 1.0.0 (2026-06-14) ------------------------------------------------------------ ADDITIV. Wird NACH core.css geladen. Mappt das Claude-Design- Paket (porcelain / obsidian / alpine) auf die BESTEHENDEN core.css Variablennamen. Plugins erben die Optik automatisch, weil sie var(--accent), var(--bg2) usw. referenzieren. AKTIVIERUNG: (Attribut gesetzt = an) DEAKTIVIEREN: data-redesign entfernen -> Core-Look kehrt 1:1 zurueck (dieser File ueberschreibt dann NICHTS). THEME-WAHL: default (kein data-theme) = alpine. Marken-Gold #C9A84C wird in ALLEN drei Themes erzwungen. WICHTIG: Jede Regel ist an html[data-redesign] gekettet. Ohne das Attribut ist diese Datei INERT (ueberschreibt nichts). Das ist die Reversibilitaet auf CSS-Ebene. ============================================================ */ /* === Gemeinsame Akzent-/Gold-Familie (markenkonstant) ======== */ html[data-redesign]{ --accent:#C9A84C; --gold:#C9A84C; --accent-glow:rgba(201,168,76,.35); --shadow-gold:0 2px 8px rgba(201,168,76,.25); } /* ============================================================ THEME 1 — PORCELAIN (hell / Default-Look des Design-Pakets) ============================================================ */ html[data-redesign][data-theme="porcelain"]{ color-scheme:light; --bg:#F4F1EA; --bg2:#FCFBF8; /* design --surface */ --bg3:#F7F4EE; /* design --surface-2 */ --bg4:#EFE6CE; /* design --accent-soft (kein echtes Aequivalent) */ --border:#E4DDD0; /* design --line */ --border-strong:#D3C9B6;/* design --line-strong */ --text:#1E1B16; /* design --ink */ --muted:#897F6D; /* design --muted */ --gold-soft:#E6C96B; --green:#4F7A52; --signal-ok:#4F7A52; --red:#B14B38; --signal-err:#B14B38; --blue:#466C84; --signal-info:#466C84; --yellow:#B5852B; --signal-warn:#B5852B; --purple:#74608A; /* helle, warme Schatten — kritisch fuer Light-Glaubwuerdigkeit */ --shadow-sm:0 1px 2px rgba(40,33,20,.05), 0 1px 1px rgba(40,33,20,.04); --shadow-md:0 4px 16px rgba(40,33,20,.07), 0 2px 5px rgba(40,33,20,.05); --shadow-lg:0 18px 48px rgba(40,33,20,.13), 0 6px 16px rgba(40,33,20,.08); } /* ============================================================ THEME 2 — OBSIDIAN (tief dunkel / neutral-kuehl) ============================================================ */ html[data-redesign][data-theme="obsidian"]{ color-scheme:dark; --bg:#131110; --bg2:#1C1916; /* --surface */ --bg3:#232019; /* --surface-2 */ --bg4:#2E2718; /* --accent-soft */ --border:#322C24; /* --line */ --border-strong:#463D31;/* --line-strong */ --text:#F3ECDD; /* --ink */ --muted:#9B8E78; /* --muted */ --gold-soft:#E8CD8A; --green:#7FA975; --signal-ok:#7FA975; --red:#CC6E54; --signal-err:#CC6E54; --blue:#7BA3BC; --signal-info:#7BA3BC; --yellow:#DDB155; --signal-warn:#DDB155; --purple:#A688BE; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); --shadow-lg:0 22px 56px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4); } /* ============================================================ THEME 3 — ALPINE (warm dunkel = Default; nah am Ist-Zustand) Auch der Fallback, wenn KEIN data-theme gesetzt ist. ============================================================ */ html[data-redesign][data-theme="alpine"], html[data-redesign]:not([data-theme]){ color-scheme:dark; --bg:#1A1410; --bg2:#221A13; /* --surface (== echtes Core-Dark) */ --bg3:#2A2018; /* --surface-2 */ --bg4:#2E2414; /* --accent-soft */ --border:#3D2F20; /* --line */ --border-strong:#52402C;/* --line-strong */ --text:#F2E8D5; /* --ink */ --muted:#A89478; /* --muted */ --gold-soft:#E6C96B; --green:#86B06A; --signal-ok:#86B06A; --red:#C26A52; --signal-err:#C26A52; --blue:#82A3B5; --signal-info:#82A3B5; --yellow:#E0B34E; --signal-warn:#E0B34E; --purple:#A88FB6; --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); --shadow-lg:0 22px 56px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4); } /* ============================================================ BRUECKE zum bestehenden body.light-Mechanismus ------------------------------------------------------------ core.js toggelt heute body.light. Damit der alte Schalter NICHT mit dem neuen Theme kollidiert, neutralisieren wir body.light, solange data-redesign aktiv ist — das Redesign steuert Hell/Dunkel allein ueber data-theme. body.light setzt nur eine Teilmenge der Flaechen-/Text-Tokens. Wir setzen sie hier auf 'inherit' zurueck, damit die am gesetzten data-theme-Werte gewinnen (html[data-redesign] hat ohnehin hoehere Spezifitaet als body.light, aber wir machen die Neutralisierung explizit & robust gegen Token-Vererbung). (Greift nur additiv; ohne data-redesign bleibt body.light voll funktionsfaehig.) ============================================================ */ html[data-redesign] body.light{ --bg:inherit; --bg2:inherit; --bg3:inherit; --bg4:inherit; --border:inherit; --border-strong:inherit; --text:inherit; --muted:inherit; } /* ============================================================ OPTIONAL (default AUS) — weichere Radien aus dem Design-Paket. Aktivieren mit ============================================================ */ html[data-redesign][data-soft-radius]{ --radius-sm:9px; --radius-md:13px; --radius-lg:18px; }