@layer tokens { /* ══════════════════════════════════════════════════════════════════════════ v3/tokens.css — Design-System v4.1 "Peppermint", eine Hue-Achse Dashboard-v3, 27.07.2026 DREI EBENEN, und die Dreistufigkeit ist der Kern der Migration: 0 Primitives theme-unabhaengige Rampen und Skalen 1 Rollen semantisch, pro Theme 2 Legacy-Alias die alten Namen -> Rollen. EINMAL, nicht pro Theme. Warum Ebene 2 nur einmal existieren muss: Custom Properties werden BEIM GEBRAUCH substituiert, nicht bei der Deklaration. `--bg: var(--surface-canvas)` deklariert kein Ergebnis, sondern einen Token-Stream. Substituiert wird auf dem Element, das --bg liest - und weil --surface-canvas per [data-theme] auf demselben ueberschrieben wird, loest --bg automatisch pro Theme korrekt auf. Das ist die gesamte Migration fuer 30 Stylesheets: ein Block. REFERENZ (recherchiert, nicht geraten): Peppermint #20808D, True Turquoise #1FB8CD, Deep Teal #13343B, Canvas light #FCFCF9, Offset #F3F3EE, Hairline #DEDBD4, genau EIN Schatten 0 1px 2px rgba(0,0,0,.05), Radien 4/6/8/12/16/ 9999, Motion 120/180/280/420ms. Die Dark-Rampe ist NICHT belegt - Perplexity ist auf oklch() umgestellt, die kursierenden Hexes stammen aus der Tailwind-Aera. Sie ist deshalb ueber die Luminanz-Struktur abgeleitet (Canvas ~L*10, Surface ~L*13) und auf #1A1B19 gesetzt: zwei Punkte Rot ueber neutral, unmerklich warm, ohne braun zu werden. KONTRAST-FALLE: Peppermint #20808D auf dunklem Canvas erreicht nur ~2.9:1 - untauglich fuer Text und Icons. EIN Teal-Wert fuer beide Themes funktioniert nicht. Dark bekommt #2FA8B4 (~5.4:1), Light #20808D (~5.1:1 auf #FCFCF9). ══════════════════════════════════════════════════════════════════════════ */ /* ── Ebene 0: Primitives ─────────────────────────────────────────────────── */ :root { /* Korall/Terrakotta — die EINZIGE chromatische Achse (~15 Grad). Nicht gewaehlt, sondern GEMESSEN: Akhilius' Bildmaterial liegt zu 99 % bei Farbton 15° (546.587 von 551.249 Pixeln, tmp/bildfarben.mjs). Der Leitton der Bilder ist #F7855C; als Flaeche waere der zu grell, deshalb eine Stufe tiefer und leicht entsaettigt. Vorher stand hier Teal bei 187° - fast die Gegenfarbe, und genau so sah es aus. */ --coral-100:#FBEAE3; --coral-200:#F6D2C4; --coral-300:#EFAF95; --coral-400:#EA8F6D; --coral-450:#E4795A; --coral-500:#C8593A; --coral-550:#B4482A; --coral-600:#963A20; --coral-700:#762C18; --coral-bright:#9A3C21; /* Zweitstimme light */ --coral-glow:#F3906F; /* Zweitstimme dark */ /* Messing/Kappengelb — die zweite Stimme, aus dem Narren. Analog (45°) statt konkurrierend, deshalb harmoniert es mit dem Akzent statt gegen ihn zu stehen. */ --brass-300:#E8C87A; --brass-400:#D9A441; --brass-500:#C9A227; --brass-600:#9A7A18; --brass-700:#7E5C0C; /* Neutrale — mit WARMEM Stich (~25°) statt Teal. Das ist die zweite Haelfte der Korrektur: Flaechen und Text stammen aus derselben Familie wie das Bildmaterial, sonst steht die Tusche-Optik gegen kuehles Grau. */ --n-50:#FFFEFD; --n-100:#FBF9F7; --n-150:#F5F1ED; --n-200:#EDE7E1; --n-300:#E3DBD3; --n-400:#CDC2B8; --n-500:#A2958A; --n-600:#6E625A; --n-700:#4A403A; --n-800:#332B26; --n-900:#1C1614; /* Dunkle Rampe — warm getoent, wie Tusche auf getoentem Papier */ --d-950:#0E0B09; --d-900:#14100E; --d-850:#1A1613; --d-800:#1E1915; --d-750:#221D19; --d-700:#2C2621; --d-600:#3A322C; --d-500:#8A7E73; --d-300:#BDB1A6; --d-100:#EFE7DF; /* Narrenspiegel — bleibt als Konzept erhalten, aber NICHT mehr als Theme, das die ganze Oberflaeche einfaerbt. Die Werte stehen weiter fuer die Legacy-Shell und fuer dezente Akzente zur Verfuegung. */ --narr-900:#131010; --narr-850:#1D1716; --narr-800:#271E1C; --narr-ink:#EDE4D0; --narr-red:#B5392A; --narr-gold:#C9A227; /* Spacing — 4px-Basis, ABSOLUT in px. Bewusst nicht in rem: html{font-size} ist in v3 der Legacy-Multiplikator (17px) und wuerde jede rem-Groesse mitskalieren. */ --sp-0:0; --sp-px:1px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; /* Schriftgroessen — ABSOLUT in px, damit neue Komponenten immun gegen die Legacy-rem-Basis sind. Das ist die eigentliche Aufloesung der rem-Falle: nicht "die richtige Basis finden", sondern die neue Typografie aus der Multiplikation herausnehmen. */ --fs-2xs:11px; --lh-2xs:1.45; --tr-2xs:0.04em; --fs-xs:12px; --lh-xs:1.45; --tr-xs:0.01em; --fs-sm:13px; --lh-sm:1.5; --tr-sm:0; --fs-base:15px; --lh-base:1.55;--tr-base:0; --fs-md:16px; --lh-md:1.6; --tr-md:0; --fs-lg:18px; --lh-lg:1.5; --tr-lg:-0.005em; --fs-xl:22px; --lh-xl:1.35; --tr-xl:-0.01em; --fs-2xl:28px; --lh-2xl:1.2; --tr-2xl:-0.015em; --fs-3xl:36px; --lh-3xl:1.12; --tr-3xl:-0.02em; --fs-4xl:48px; --lh-4xl:1.05; --tr-4xl:-0.025em; --fs-5xl:64px; --lh-5xl:1.0; --tr-5xl:-0.03em; --fw-normal:400; --fw-medium:500; --fw-semibold:600; /* KEIN 700 */ /* Schrift — drei Familien statt fuenf. --font-hero ist NEU und der einzige Weg zur Serif. Es waere naheliegend, --font-display darauf zu mappen: FALSCH. --font-display hat 33 Konsumenten und die sitzen ueberwiegend an KLEINEN Titeln (factory-panel.css 9x, system-map.css 11x, tiktok-panel.css:6 bei 1.5rem). Die wuerden alle Serif bekommen. Serif ist deshalb nur ueber --font-hero erreichbar, das ausschliesslich v3-Klassen ab --fs-3xl konsumieren. */ --font-sans:'Instrument Sans','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-hero:'Fraunces','Source Serif 4',Georgia,serif; --font-num:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; /* Radien */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:9999px; /* Layout */ --rail-w:56px; --rail-w-open:220px; --header-h:56px; --askbar-h:56px; --bottombar-h:58px; --row-h:36px; --row-h-touch:44px; --pad-view:clamp(24px,4vw,48px); /* Notizen-Suchleiste sitzt unter der Topbar, nicht darin. Sonst verdeckt sie entweder die Header-Knoepfe (Legacy) oder verschwindet hinter dem Header (v3, z-index 195). */ --sticky-bar-top:66px; --measure:736px; --measure-wide:1120px; /* Z-Skala — respektiert den Bestand, damit nichts versehentlich uebereinander rutscht. Nebenbefund: das Papier-Grain sass auf 9999 und damit UEBER dem Toast (9700). Bei 2% Deckkraft nie aufgefallen, aber falsch - in v3 sitzt es auf 60. */ --z-base:0; --z-raised:10; --z-rail:40; --z-header:50; /* index.html #header */ --z-grain:60; /* war 9999 */ --z-pet:86; /* akhilius-pet.css */ --z-sticky:150; --z-sticky-fab:160; --z-sticky-drag:190; /* sticky-notes.css */ --z-modal:200; /* .modal-overlay */ --z-modal-crud:1000; /* crud-ui.css */ --z-popover:2000; /* polish.css .polish-tooltip */ --z-command:9500; /* cmd-palette.css */ --z-toast:9700; /* shell-core.js inline */ --z-debug:9999; /* frei geworden */ /* Motion */ --dur-1:120ms; --dur-2:180ms; --dur-3:280ms; --dur-4:420ms; --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); } /* Vier Zeilen, die JEDE Animation im Neubau abschalten - der Grund, Dauern ueberhaupt zu tokenisieren. */ @media (prefers-reduced-motion: reduce) { :root { --dur-1:1ms; --dur-2:1ms; --dur-3:1ms; --dur-4:1ms; } } /* ── Ebene 1: Rollen ─────────────────────────────────────────────────────── */ /* DARK ist Default und liegt auf :root. Kein [data-theme="dark"]-Block: wer kein Attribut setzt, bekommt dark. */ :root, [data-theme="dark"] { --surface-canvas:var(--d-900); --surface-1:var(--d-800); --surface-2:var(--d-750); --surface-3:var(--d-700); --surface-inset:var(--d-950); --surface-overlay:rgba(14,11,9,.66); --text-1:var(--d-100); --text-2:var(--d-300); --text-3:var(--d-500); --line-1:rgba(239,231,223,.09); --line-2:rgba(239,231,223,.16); --line-3:rgba(239,231,223,.26); --accent-1:var(--coral-450); --accent-2:var(--coral-glow); --accent-3:var(--coral-500); --accent-wash:rgba(228,121,90,.13); --accent-wash-2:rgba(228,121,90,.22); --accent-line:rgba(228,121,90,.38); --accent-on:#1A0F0A; /* Zweitstimme: helleres Cyan aus derselben Familie, kein zweiter Farbkreis */ --accent-alt-1:var(--brass-400); --accent-alt-2:var(--brass-300); --accent-alt-3:var(--brass-500); --accent-alt-wash:rgba(217,164,65,.12); --accent-alt-wash-2:rgba(217,164,65,.20); --accent-alt-line:rgba(217,164,65,.32); --accent-alt-on:#1A0F0A; --success:#6FAE7E; --success-wash:rgba(111,174,126,.14); --success-line:rgba(111,174,126,.32); --warning:var(--brass-500); --warning-wash:rgba(201,162,39,.14); --warning-line:rgba(201,162,39,.32); --danger:#DD5273; --danger-wash:rgba(221,82,115,.15); --danger-line:rgba(221,82,115,.34); --info:#8AA6C4; --info-wash:rgba(138,166,196,.14); --info-line:rgba(138,166,196,.32); --shadow-1:none; --shadow-2:0 8px 28px rgba(0,0,0,.44), 0 1px 2px rgba(0,0,0,.32); --shadow-focus:0 0 0 3px var(--accent-wash-2); --grain-opacity:0.012; color-scheme:dark; } [data-theme="light"] { --surface-canvas:var(--n-100); --surface-1:var(--n-150); --surface-2:var(--n-200); --surface-3:var(--n-300); --surface-inset:var(--n-50); --surface-overlay:rgba(28,22,20,.30); --text-1:var(--n-900); --text-2:var(--n-700); --text-3:var(--n-600); --line-1:rgba(28,22,20,.09); --line-2:rgba(28,22,20,.15); --line-3:rgba(28,22,20,.24); --accent-1:var(--coral-550); --accent-2:var(--coral-600); --accent-3:var(--coral-700); --accent-wash:rgba(180,72,42,.09); --accent-wash-2:rgba(180,72,42,.16); --accent-line:rgba(180,72,42,.32); --accent-on:var(--n-100); --accent-alt-1:var(--brass-700); --accent-alt-2:var(--brass-600); --accent-alt-3:#5A4008; --accent-alt-wash:rgba(126,92,12,.10); --accent-alt-wash-2:rgba(126,92,12,.17); --accent-alt-line:rgba(126,92,12,.30); --accent-alt-on:var(--n-100); --success:#2F7A4A; --success-wash:rgba(47,122,74,.10); --success-line:rgba(47,122,74,.28); --warning:var(--brass-700); --warning-wash:rgba(126,92,12,.10); --warning-line:rgba(126,92,12,.28); --danger:#AB2A4C; --danger-wash:rgba(171,42,76,.10); --danger-line:rgba(171,42,76,.28); --info:#3D6389; --info-wash:rgba(61,99,137,.10); --info-line:rgba(61,99,137,.28); --shadow-1:0 1px 2px rgba(12,27,29,.05); --shadow-2:0 8px 28px rgba(12,27,29,.10), 0 1px 2px rgba(12,27,29,.05); --shadow-focus:0 0 0 3px var(--accent-wash-2); --grain-opacity:0.010; color-scheme:light; } /* NARR erbt die komplette v4-Struktur und behaelt seine Symbolik: Zinnober ist hier der PRIMAERakzent, Kappengelb die Zweitstimme. Teal erscheint in narr nirgends. Damit ist narr kein Sonderfall, sondern dieselbe Struktur mit anderen Werten. */ /* narr — bleibt fuer die Legacy-Shell lauffaehig, ist in v3 aber KEIN waehlbares Theme mehr. Der Narr ist ein Konzept, kein Etikett: er soll das UI nicht einfaerben. Dezente Spuren leben stattdessen im Sparkle, in den handgezeichneten Leerzustaenden und im Pet. */ [data-theme="narr"] { --surface-canvas:var(--narr-900); --surface-1:var(--narr-850); --surface-2:var(--narr-800); --surface-3:#322724; --surface-inset:#0D0A0A; --surface-overlay:rgba(10,7,7,.58); --text-1:var(--narr-ink); --text-2:#ADA28A; --text-3:#79705C; --line-1:rgba(237,228,208,.09); --line-2:rgba(237,228,208,.16); --line-3:rgba(237,228,208,.26); --accent-1:var(--narr-red); --accent-2:#D04A38; --accent-3:#8E2A1E; --accent-wash:rgba(181,57,42,.14); --accent-wash-2:rgba(181,57,42,.22); --accent-line:rgba(181,57,42,.38); --accent-on:#FBF3E4; --accent-alt-1:var(--narr-gold); --accent-alt-2:#DBB63C; --accent-alt-3:#A5831C; --accent-alt-wash:rgba(201,162,39,.13); --accent-alt-wash-2:rgba(201,162,39,.21); --accent-alt-line:rgba(201,162,39,.34); --accent-alt-on:#1A1405; --success:#7FA577; --success-wash:rgba(127,165,119,.12); --success-line:rgba(127,165,119,.30); --warning:var(--narr-gold); --warning-wash:rgba(201,162,39,.12); --warning-line:rgba(201,162,39,.30); --danger:#E2574A; --danger-wash:rgba(226,87,74,.16); --danger-line:rgba(226,87,74,.34); --info:#7E97A8; --info-wash:rgba(126,151,168,.12); --info-line:rgba(126,151,168,.30); --shadow-1:none; --shadow-2:0 8px 28px rgba(0,0,0,.46), 0 1px 2px rgba(0,0,0,.32); --shadow-focus:0 0 0 3px var(--accent-wash-2); --grain-opacity:0.014; color-scheme:dark; } /* ── Ebene 2: Legacy-Aliase. EINMAL. NICHT PRO THEME. ────────────────────── */ /* Diese ~34 Zeilen sind die gesamte Migration fuer 30 Stylesheets und die 5 JS-injizierten