/* =====================================================================
tokens.css — Design-Tokens (Single Source of Truth)
---------------------------------------------------------------------
Enthält AUSSCHLIESSLICH CSS Custom Properties.
Kein Reset, kein @view-transition, kein @font-face, keine Komponenten-Styles.
Aufbau:
1. Farbpaletten (theme-unabhängig): Purple, Semantik, Fachfarben
2. Typografie (Schriftfamilien, Größen, Gewichte)
3. Abstände (Spacing-Skala)
4. Radien
5. Schatten & Glows
6. Komponenten-Tokens (Verläufe u. a.)
7. Oberflächen & Textfarben — Dark (Standard)
8. Oberflächen & Textfarben — Light
9. Aliase: alte Token-Namen → neue Tokens (Abwärtskompatibilität)
Quelle der Werte: docs/design/components/brand.html
Einbinden NACH fonts.css, VOR style.css:
Theme: Dark ist Standard (:root, auch ohne data-theme-Attribut).
Light Mode wird über [data-theme="light"] auf aktiviert.
===================================================================== */
/* ===== 1. Farbpaletten (theme-unabhängig) ========================== */
:root {
/* ---- Purple (Primärpalette) ---- */
--purple-100: #F3E8FF;
--purple-200: #E9D5FF;
--purple-300: #D8B4FE;
--purple-400: #C084FC;
--purple-500: #A855F7;
--purple-600: #9333EA;
--purple-700: #7C3AED; /* ★ Marken-Primärton */
--purple-800: #5B21B6;
--purple-900: #3B0764;
/* ---- Semantische Farben (mit sprechenden Aliasen) ---- */
--gold: #F59E0B; /* XP / Belohnung */
--xp: var(--gold);
--success: #10B981; /* Richtig / Abschluss */
--error: #EF4444; /* Falsch / Fehler */
--warning: #F97316; /* Timer / Achtung */
--timer: var(--warning);
--prestige: #EA580C; /* Prestige-Aufstieg (Zyklus-Abschluss) */
--info: #06B6D4; /* Energie / Info */
--energy: var(--info);
--indigo: #4F46E5; /* Sekundär-Akzent (Verläufe) */
/* ---- Fachfarben ---- */
--fach-pos: #7C3AED;
--fach-dbi: #0EA5E9;
--fach-nsvs: #10B981;
--fach-medt: #F97316;
--fach-syp: #EF4444;
--fach-wir: #F59E0B;
--fach-tinf: #EC4899;
}
/* ===== 2. Typografie =============================================== */
:root {
/* ---- Schriftfamilien (siehe fonts.css) ---- */
--font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
/* ---- Schriftgrößen ---- */
--fs-display: 40px;
--fs-h1: 28px;
--fs-h2: 22px;
--fs-h3: 18px;
--fs-body-lg: 16px;
--fs-body: 14px;
--fs-caption: 12px;
--fs-label: 11px;
/* ---- Schriftgewichte ---- */
/* Hinweis: Space Grotesk hat kein Gewicht 800 (max. 700). Display/H1
nutzen daher --fw-bold (700) statt eines synthetischen 800. */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
}
/* ===== 3. Abstände ================================================= */
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-base: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
}
/* ===== 4. Radien =================================================== */
:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 999px;
/* Off-Scale-Ausreißer (zwischen md=8 und lg=12): bewusst eigener Token,
statt CTA/Stat-Pill auf --radius-lg zu verbiegen. Semantisch nach dem
Haupt-Konsument .btn-cta benannt; .stat-pill teilt sich den Radius. */
--radius-cta: 10px;
}
/* ===== 5. Schatten & Glows ========================================= */
:root {
--shadow-sm: 0 2px 8px #00000066;
--shadow-lg: 0 4px 24px #00000088;
--shadow-xl: 0 20px 40px #0000004D; /* tiefe Elevation (Auth-Card); Hex-Alpha ≈0.30 */
--glow-brand: 0 0 20px #7C3AED44;
--glow-gold: 0 0 20px #F59E0B55;
--glow-success: 0 0 20px #10B98155;
--glow-error: 0 0 20px #EF444455;
}
/* ===== 6. Komponenten-Tokens ======================================= */
:root {
--gradient-brand: linear-gradient(135deg, var(--purple-700), var(--indigo));
--gradient-gold: linear-gradient(135deg, var(--gold), var(--warning));
--gradient-success: linear-gradient(135deg, var(--success), #059669);
--gradient-text-brand: linear-gradient(135deg, var(--purple-500), #818CF8);
--text-on-primary: #FFFFFF; /* Text auf farbigen Buttons/Flächen */
/* ---- Button-Tokens (Basisklasse .btn, s. style.css) ---- */
--btn-radius: var(--radius-md); /* einheitlicher Button-Radius (8px) */
--btn-border: 1px solid var(--surface-2); /* Rahmen der Ghost-Buttons */
}
/* ===== 7. Oberflächen & Textfarben — Dark (Standard) =============== */
:root,
[data-theme="dark"] {
--bg-base: #0D0D1A; /* Seitenhintergrund (tiefste Ebene) */
--surface: #131320; /* Card-Ebene 1 (Karten, Panels) */
--surface-2: #1A1A2E; /* Card-Ebene 2 (Inputs, hervorgehoben) */
--border: #1E1E3F; /* Rahmen / Trennlinien */
--brand-muted: #2D1B69; /* gedämpfte Markenfläche */
--text: #F1F5F9; /* Haupttext */
--text-muted: #94A3B8; /* Sekundärtext */
--text-subtle: #64748B; /* Tertiärtext / Hinweise */
}
/* ===== 8. Oberflächen & Textfarben — Light ========================= */
:root[data-theme="light"] {
--bg-base: #F1F5F9;
--surface: #FFFFFF;
--surface-2: #E2E8F0;
--border: #CBD5E1;
--brand-muted: #EDE9FE;
--text: #0F172A;
--text-muted: #475569;
--text-subtle: #64748B;
}
/* ===== 9. Aliase: alte Token-Namen → neue Tokens =================== */
/* Halten bestehenden Code lauffähig, während wir auf das neue System
migrieren. Werte lösen sich theme-abhängig auf (var() wird erst bei
Nutzung substituiert). */
:root {
--bg: var(--bg-base);
--primary: var(--purple-700);
--primary-hover: var(--indigo);
--radius: var(--radius-lg);
/* --surface, --surface-2, --text, --text-muted, --success, --error
behalten ihren Namen → kein Alias nötig (nur neue Werte oben). */
}