/* ══════════════════════════════════════════ LearningForge — Subject Tokens (Layer 2) ══════════════════════════════════════════ Per-Subject Design-Token-Cascade, 4-Layer-Modell (v2): Layer 1 — Theme-Tokens (main.css + cosmetics.css) → setzt --cosmetic-lift / --cosmetic-saturation / --cosmetic-pattern-opacity-multiplier Layer 2 — Subject-Tokens (this file) ← here → liefert --subject-accent / -accent-soft / -icon-stroke / -radius-feel / -motion-feel / -pattern-bg / -font (+ -font-mono fuer Informatik) Layer 3 — Topic-Tokens (Phase 3, separate) Layer 4 — User-Override (Phase 2, user-subject-colors.css) Spec: .claude/company/specs/per-subject-design-tokens-v2.md (Maya v2) Phase 1.5 (this file, v2-Refactor): - Subject-Akzente werden aus --subject-base-l/c/h berechnet, mit Cosmetic-Modulation via calc(... + var(--cosmetic-lift)) bzw. calc(... * var(--cosmetic-saturation)). So tragen Subject und Cosmetic gleichzeitig — Aurora + Mathe = aurora-saturierter Mathe-Akzent, nicht entweder/oder. (Simon Q8: Integration statt Hierarchie.) - Approach: oklch() mit calc()-Argumenten direkt — KEIN `oklch(from ...)` Relative-Color-Syntax (Browser-Support fuer calc() in oklch ist weiter als from-syntax und reicht voll). - --subject-font Stack pro Fach (Maya v2 Tabelle). Informatik bekommt zusaetzlich --subject-font-mono fuer Code-Bloecke. - Cyberpunk-Neutralisierung GESTRICHEN — Cyberpunk moduliert ueber --cosmetic-saturation:1.30 saturierter, aber Subject- Identitaet bleibt erkennbar. Cascade-Konsumenten consumieren über Var-Fallback: color: var(--user-subject-accent, var(--topic-accent, var(--subject-accent, var(--accent)))); font-family: var(--subject-font, var(--font)); Order in : main.css → subject-tokens.css → cosmetics.css Werte: alle Akzente in oklch(), kein Hex (Theme-Compatibility). ══════════════════════════════════════════ */ /* ── Pilot-Subject: Mathematik (vollständig) ─────────── Charakter: präzise, geometrisch, deep-blue, snappy, eckige 90°-Linien. */ [data-subject="Mathematik"] { --subject-base-l: 0.48; --subject-base-c: 0.18; --subject-base-h: 252; --subject-soft-l: 0.96; --subject-soft-c: 0.03; --subject-accent: oklch( calc(var(--subject-base-l) + var(--cosmetic-lift, 0)) calc(var(--subject-base-c) * var(--cosmetic-saturation, 1)) var(--subject-base-h) ); --subject-accent-soft: oklch( calc(var(--subject-soft-l) + var(--cosmetic-lift, 0) * 0.3) calc(var(--subject-soft-c) * var(--cosmetic-saturation, 1)) var(--subject-base-h) ); --subject-icon-stroke: var(--subject-accent); --subject-radius-feel: 8px; --subject-motion-feel: 0.15s cubic-bezier(.4, 0, .2, 1); --subject-pattern-opacity-base: 0.05; --subject-pattern-bg: linear-gradient( 135deg, transparent 49.5%, var(--subject-accent-soft) 49.5%, var(--subject-accent-soft) 50.5%, transparent 50.5% ); --subject-font: 'Inter', system-ui, -apple-system, sans-serif; } [data-theme="dark"] [data-subject="Mathematik"] { --subject-base-l: 0.72; --subject-base-c: 0.14; --subject-soft-l: 0.20; --subject-soft-c: 0.04; /* h bleibt 252 */ } /* ── Stub-Subjects (v2-Refactor) ─────────────────────── Alle Faecher mit --subject-base-l/c/h + --subject-font. Formel fuer accent + accent-soft kommt aus dem Mathe- Block oben — wir setzen hier nur die Basis-Werte. Die accent-Berechnung wird unten als shared rule zentral appliziert (siehe Block "Shared accent calc"). */ /* 2. Deutsch — navy ink */ [data-subject="Deutsch"] { --subject-base-l: 0.42; --subject-base-c: 0.12; --subject-base-h: 240; --subject-soft-l: 0.95; --subject-soft-c: 0.02; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Deutsch"] { --subject-base-l: 0.70; --subject-base-c: 0.10; --subject-soft-l: 0.22; --subject-soft-c: 0.03; } /* 3. Englisch — royal blue */ [data-subject="Englisch"] { --subject-base-l: 0.40; --subject-base-c: 0.18; --subject-base-h: 264; --subject-soft-l: 0.95; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Englisch"] { --subject-base-l: 0.72; --subject-base-c: 0.15; --subject-soft-l: 0.22; --subject-soft-c: 0.05; } /* 4. Geschichte — sepia bronze, klassische Serif */ [data-subject="Geschichte"] { --subject-base-l: 0.58; --subject-base-c: 0.13; --subject-base-h: 60; --subject-soft-l: 0.96; --subject-soft-c: 0.03; --subject-font: 'Crimson Text', 'Charter', Georgia, serif; } [data-theme="dark"] [data-subject="Geschichte"] { --subject-base-l: 0.75; --subject-base-c: 0.10; --subject-soft-l: 0.24; --subject-soft-c: 0.04; } /* 5. Biologie — emerald-leaf */ [data-subject="Biologie"] { --subject-base-l: 0.55; --subject-base-c: 0.16; --subject-base-h: 152; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Biologie"] { --subject-base-l: 0.72; --subject-base-c: 0.14; --subject-soft-l: 0.22; --subject-soft-c: 0.05; } /* 6. Latein — stone-red brick, klassische Serif */ [data-subject="Latein"] { --subject-base-l: 0.48; --subject-base-c: 0.16; --subject-base-h: 25; --subject-soft-l: 0.96; --subject-soft-c: 0.03; --subject-font: 'Crimson Text', 'Charter', Georgia, serif; } [data-theme="dark"] [data-subject="Latein"] { --subject-base-l: 0.70; --subject-base-c: 0.13; --subject-soft-l: 0.22; --subject-soft-c: 0.04; } /* 7. Chemie — violet-chem */ [data-subject="Chemie"] { --subject-base-l: 0.54; --subject-base-c: 0.16; --subject-base-h: 290; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Chemie"] { --subject-base-l: 0.74; --subject-base-c: 0.13; --subject-soft-l: 0.22; --subject-soft-c: 0.05; } /* 8. Physik — electric cyan-blue */ [data-subject="Physik"] { --subject-base-l: 0.58; --subject-base-c: 0.16; --subject-base-h: 220; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Physik"] { --subject-base-l: 0.75; --subject-base-c: 0.14; --subject-soft-l: 0.22; --subject-soft-c: 0.05; } /* 9. Geographie — teal-globe */ [data-subject="Geographie"] { --subject-base-l: 0.56; --subject-base-c: 0.15; --subject-base-h: 165; --subject-soft-l: 0.96; --subject-soft-c: 0.03; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Geographie"] { --subject-base-l: 0.73; --subject-base-c: 0.13; --subject-soft-l: 0.22; --subject-soft-c: 0.04; } /* 10. Informatik — electric cyan (light), terminal-green (dark) Sonderfall: zwei Font-Stacks — UI-Text in Inter, Code in Mono. */ [data-subject="Informatik"] { --subject-base-l: 0.58; --subject-base-c: 0.18; --subject-base-h: 195; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; --subject-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', ui-monospace, monospace; } [data-theme="dark"] [data-subject="Informatik"] { --subject-base-l: 0.75; --subject-base-c: 0.18; --subject-base-h: 152; /* hue switch: cyan → terminal-green im dark */ --subject-soft-l: 0.20; --subject-soft-c: 0.06; } /* Carbon × Informatik — gezielter Override gegen Verschmelzung (Maya v2 Spec, "Cosmetic × Subject-Spezialfälle"). Carbon ist grau-gruen, Informatik-Default ist terminal-cyan/-green — ohne Override wuerden sie ineinanderlaufen. */ [data-app-theme="carbon"] [data-subject="Informatik"] { --subject-base-l: 0.78; --subject-base-c: 0.20; } /* 11. Musik — warm amber */ [data-subject="Musik"] { --subject-base-l: 0.65; --subject-base-c: 0.16; --subject-base-h: 50; --subject-soft-l: 0.96; --subject-soft-c: 0.03; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Musik"] { --subject-base-l: 0.78; --subject-base-c: 0.14; --subject-soft-l: 0.24; --subject-soft-c: 0.04; } /* 12. Kunst — coral-orange-pop */ [data-subject="Kunst"] { --subject-base-l: 0.62; --subject-base-c: 0.20; --subject-base-h: 35; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Kunst"] { --subject-base-l: 0.76; --subject-base-c: 0.17; --subject-soft-l: 0.24; --subject-soft-c: 0.05; } /* 13. Sport — athletic yellow-amber */ [data-subject="Sport"] { --subject-base-l: 0.72; --subject-base-c: 0.18; --subject-base-h: 90; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Sport"] { --subject-base-l: 0.80; --subject-base-c: 0.16; --subject-soft-l: 0.24; --subject-soft-c: 0.05; } /* 14. Politische-Bildung — civic sky-blue Mega-Update 2026-05-09 Round 2 (Sophie-Audit Finding 2): Basis-Hex aus subjects-config.json #0ea5e9 (sky-500) → OKLCH h~237. Hue 237 sitzt sauber zwischen Physik (h=220) und Englisch (h=264) — eigener Slot, keine Verwechslung mit anderen Blau-Faechern. */ [data-subject="Politische-Bildung"] { --subject-base-l: 0.62; --subject-base-c: 0.16; --subject-base-h: 237; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Politische-Bildung"] { --subject-base-l: 0.76; --subject-base-c: 0.13; --subject-soft-l: 0.22; --subject-soft-c: 0.05; } /* 15. LER — ethics purple Lebensgestaltung-Ethik-Religionskunde. Basis-Hex #a855f7 (purple-500) → OKLCH h~303. Distinkt von Chemie (h=290 violet-chem) und Latein (h=25 brick-red) — saturierter Magenta-Lila-Zweig. */ [data-subject="LER"] { --subject-base-l: 0.58; --subject-base-c: 0.20; --subject-base-h: 303; --subject-soft-l: 0.96; --subject-soft-c: 0.04; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="LER"] { --subject-base-l: 0.74; --subject-base-c: 0.16; --subject-soft-l: 0.22; --subject-soft-c: 0.05; } /* 16. Arbeitslehre — workshop earth-brown Mega-Update 2026-05-09 Round 2: Color in subjects-config.json upgraded #737373 → #92400e (amber-800). OKLCH h~47, bewusst niedrige L (0.46 light / 0.68 dark) — das macht es zu Braun statt Amber. Hue 47 nahe Musik (h=50) und Geschichte (h=60), aber durch tiefere Lightness klar als Werkstatt-Braun lesbar (Musik L=0.65/0.78, Geschichte L=0.58/0.75). Loest Sophie's Finding 1 (Kontrast) + Finding 2 (OKLCH-Pipeline). */ [data-subject="Arbeitslehre"] { --subject-base-l: 0.46; --subject-base-c: 0.11; --subject-base-h: 47; --subject-soft-l: 0.95; --subject-soft-c: 0.03; --subject-font: 'Inter', system-ui, sans-serif; } [data-theme="dark"] [data-subject="Arbeitslehre"] { --subject-base-l: 0.68; --subject-base-c: 0.10; --subject-soft-l: 0.22; --subject-soft-c: 0.04; } /* ── Shared accent calc — alle Stub-Subjects ────────── Statt jeden Subject-Block die accent-Berechnung zu wiederholen, appliziert dieser Selector die Modulations-Formel auf alle data-subject-Elemente. Mathematik hat oben schon eine eigene pattern-bg-Definition, die Berechnung hier ueberschreibt das nicht (gleicher Output). */ [data-subject] { --subject-accent: oklch( calc(var(--subject-base-l, 0.5) + var(--cosmetic-lift, 0)) calc(var(--subject-base-c, 0.15) * var(--cosmetic-saturation, 1)) var(--subject-base-h, 250) ); --subject-accent-soft: oklch( calc(var(--subject-soft-l, 0.95) + var(--cosmetic-lift, 0) * 0.3) calc(var(--subject-soft-c, 0.03) * var(--cosmetic-saturation, 1)) var(--subject-base-h, 250) ); } /* ── Subject-Font-Adoption auf Identity-Surfaces ────── Maya v2 § "Wo --subject-font greift": NICHT alle Components, sondern gezielt Topic-Header + Subtopic-Card-Heading. Body-Font bleibt --font (Inter). Settings/Profile/Friends/Leaderboard/ Builder behalten harten --font Override (siehe main.css falls noetig — aktuell durch Default-Cascade abgedeckt). */ [data-subject] .topic-header h1, [data-subject] .subtopic-name { font-family: var(--subject-font, var(--font)); } /* Informatik-Sonderfall: Code-Bloecke (Formula-Pending zeigt LaTeX- Source als Code-Tag) bekommen den Mono-Stack. Andere Faecher behalten den Default-Mono-Stack aus main.css. */ [data-subject="Informatik"] .lf-formula-pending { font-family: var(--subject-font-mono, ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace); } /* ── Settings-Toggle: Subject-Themes off ─────────────── userData.settings.subjectThemesOff === true → app.js setzt body.classList.add('subject-themes-off'). Hier neutralisieren wir die Layer-2-Tokens auf Layer-1, damit alles auf das Theme-Default fällt (Konzentrations- Modus, v1-Spec § "Constraint C — Settings-Override"). */ body.subject-themes-off [data-subject], body.subject-themes-off[data-subject] { --subject-accent: var(--accent); --subject-accent-soft: var(--accent-subtle); --subject-icon-stroke: var(--accent); --subject-radius-feel: var(--radius); --subject-motion-feel: var(--transition); --subject-pattern-bg: none; --subject-font: var(--font); --subject-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; } /* ── Reduced-Motion ──────────────────────────────────── prefers-reduced-motion respektieren — Subject-Motion wird auf instant gesetzt, alle anderen Tokens bleiben. Spec § Edge case 11. */ @media (prefers-reduced-motion: reduce) { [data-subject] { --subject-motion-feel: 0s linear; } } /* ══════════════════════════════════════════════════════ ── Layer 4 — User-Subject-Color-Override (Cycle-3) ── ══════════════════════════════════════════════════════ Maya v2-Spec Color-Palette. 12 Slugs, jeder schreibt --user-subject-accent + --user-subject-accent-soft, die in der Cascade ueber Layer-2 (--subject-accent) gewinnen. Anwendung: app.js setzt data-user-subject-color="" auf das Subject-Wrapper-Element wenn der User in den Settings eine Farbe ueberschreibt. Konsumenten lesen via: color: var(--user-subject-accent, var(--topic-accent, var(--subject-accent, var(--accent)))); Spec-Tabelle: slug hue chroma(L/D) lightness(L/D) royal-blue 252 0.18 / 0.14 0.48 / 0.72 electric-cyan 220 0.16 / 0.13 0.52 / 0.74 terminal-green 150 0.16 / 0.14 0.50 / 0.74 emerald-leaf 152 0.18 / 0.14 0.48 / 0.73 teal-globe 175 0.14 / 0.12 0.52 / 0.74 sepia-bronze 60 0.13 / 0.11 0.55 / 0.76 crimson-classical 25 0.18 / 0.15 0.50 / 0.72 coral-pop 35 0.17 / 0.14 0.58 / 0.74 amber-warm 50 0.16 / 0.13 0.60 / 0.76 violet-chem 290 0.17 / 0.14 0.50 / 0.72 mauve-soft 310 0.10 / 0.08 0.58 / 0.74 slate-pro 240 0.04 / 0.03 0.50 / 0.72 Soft-Variante: gleiche Hue, Chroma ~0.04, Lightness 0.96 (light) / 0.18 (dark). ══════════════════════════════════════════════════════ */ [data-user-subject-color="royal-blue"] { --user-subject-accent: oklch(0.48 0.18 252); --user-subject-accent-soft: oklch(0.96 0.04 252); } [data-theme="dark"] [data-user-subject-color="royal-blue"] { --user-subject-accent: oklch(0.72 0.14 252); --user-subject-accent-soft: oklch(0.18 0.04 252); } [data-user-subject-color="electric-cyan"] { --user-subject-accent: oklch(0.52 0.16 220); --user-subject-accent-soft: oklch(0.96 0.04 220); } [data-theme="dark"] [data-user-subject-color="electric-cyan"] { --user-subject-accent: oklch(0.74 0.13 220); --user-subject-accent-soft: oklch(0.18 0.04 220); } [data-user-subject-color="terminal-green"] { --user-subject-accent: oklch(0.50 0.16 150); --user-subject-accent-soft: oklch(0.96 0.04 150); } [data-theme="dark"] [data-user-subject-color="terminal-green"] { --user-subject-accent: oklch(0.74 0.14 150); --user-subject-accent-soft: oklch(0.18 0.04 150); } [data-user-subject-color="emerald-leaf"] { --user-subject-accent: oklch(0.48 0.18 152); --user-subject-accent-soft: oklch(0.96 0.04 152); } [data-theme="dark"] [data-user-subject-color="emerald-leaf"] { --user-subject-accent: oklch(0.73 0.14 152); --user-subject-accent-soft: oklch(0.18 0.04 152); } [data-user-subject-color="teal-globe"] { --user-subject-accent: oklch(0.52 0.14 175); --user-subject-accent-soft: oklch(0.96 0.04 175); } [data-theme="dark"] [data-user-subject-color="teal-globe"] { --user-subject-accent: oklch(0.74 0.12 175); --user-subject-accent-soft: oklch(0.18 0.04 175); } [data-user-subject-color="sepia-bronze"] { --user-subject-accent: oklch(0.55 0.13 60); --user-subject-accent-soft: oklch(0.96 0.04 60); } [data-theme="dark"] [data-user-subject-color="sepia-bronze"] { --user-subject-accent: oklch(0.76 0.11 60); --user-subject-accent-soft: oklch(0.18 0.04 60); } [data-user-subject-color="crimson-classical"] { --user-subject-accent: oklch(0.50 0.18 25); --user-subject-accent-soft: oklch(0.96 0.04 25); } [data-theme="dark"] [data-user-subject-color="crimson-classical"] { --user-subject-accent: oklch(0.72 0.15 25); --user-subject-accent-soft: oklch(0.18 0.04 25); } [data-user-subject-color="coral-pop"] { --user-subject-accent: oklch(0.58 0.17 35); --user-subject-accent-soft: oklch(0.96 0.04 35); } [data-theme="dark"] [data-user-subject-color="coral-pop"] { --user-subject-accent: oklch(0.74 0.14 35); --user-subject-accent-soft: oklch(0.18 0.04 35); } [data-user-subject-color="amber-warm"] { --user-subject-accent: oklch(0.60 0.16 50); --user-subject-accent-soft: oklch(0.96 0.04 50); } [data-theme="dark"] [data-user-subject-color="amber-warm"] { --user-subject-accent: oklch(0.76 0.13 50); --user-subject-accent-soft: oklch(0.18 0.04 50); } [data-user-subject-color="violet-chem"] { --user-subject-accent: oklch(0.50 0.17 290); --user-subject-accent-soft: oklch(0.96 0.04 290); } [data-theme="dark"] [data-user-subject-color="violet-chem"] { --user-subject-accent: oklch(0.72 0.14 290); --user-subject-accent-soft: oklch(0.18 0.04 290); } [data-user-subject-color="mauve-soft"] { --user-subject-accent: oklch(0.58 0.10 310); --user-subject-accent-soft: oklch(0.96 0.04 310); } [data-theme="dark"] [data-user-subject-color="mauve-soft"] { --user-subject-accent: oklch(0.74 0.08 310); --user-subject-accent-soft: oklch(0.18 0.04 310); } [data-user-subject-color="slate-pro"] { --user-subject-accent: oklch(0.50 0.04 240); --user-subject-accent-soft: oklch(0.96 0.02 240); } [data-theme="dark"] [data-user-subject-color="slate-pro"] { --user-subject-accent: oklch(0.72 0.03 240); --user-subject-accent-soft: oklch(0.18 0.02 240); } /* Subject-cards consume --user-subject-accent via Layer-2 fallback chain. When user has overridden a subject's color, this Layer 4 sits highest in cascade-resolution. Existing consumers in main.css/subject-tokens.css already use the var() fallback chain — no consumer-edit needed. */ [data-subject][data-user-subject-color] { --subject-accent: var(--user-subject-accent, var(--subject-accent)); --subject-accent-soft: var(--user-subject-accent-soft, var(--subject-accent-soft)); }