/* =======================================================================
 * 🎨 DESIGN TOKENS — Die Zentrale für alle Farb- und Schrift-Variablen
 * =======================================================================
 * OOCSS Prinzip: Alle Design-Entscheidungen an EINER Stelle.
 * Ändere hier einen Wert → er ändert sich überall auf der Seite.
 * ======================================================================= */

/* -----------------------------------------------------------------------
 * DARK THEME (Standard)
 * ----------------------------------------------------------------------- */
:root {
    /* === Neon / Akzentfarben === */
    --color-neon-blue: #00FFFF;
    --color-neon-dark: #0077FF;
    --color-neon-purple: #bd00ff;
    --color-neon-green: #00ff00;
    --color-neon-pink: #ff6bcb;

    /* === Hintergrund & Oberflächen === */
    --bg-main: #050505;
    --bg-surface: rgba(24, 24, 27, 0.6);    /* zinc-900/60 */
    --bg-surface-hover: rgba(24, 24, 27, 0.8);
    --bg-overlay: rgba(0, 0, 0, 0.9);
    --bg-card: rgba(0, 0, 0, 0.4);

    /* === Borders === */
    --border-default: #27272a;              /* zinc-800 */
    --border-subtle: #3f3f46;               /* zinc-700 */
    --border-hover: #52525b;                /* zinc-600 */

    /* === Text === */
    --text-primary: #e2e8f0;                /* slate-200 */
    --text-secondary: #94a3b8;              /* slate-400 */
    --text-muted: #8494a7;                  /* WCAG AA 5.8:1 */
    --text-faint: #6b7a8d;                  /* WCAG AA 4.5:1 */

    /* === Schatten === */
    --shadow-glow-blue: 0 0 25px rgba(0, 255, 255, 0.3);
    --shadow-glow-purple: 0 0 25px rgba(189, 0, 255, 0.3);
    --shadow-panel: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* === Schriften === */
    --font-display: 'Press Start 2P', cursive;
    --font-mono: 'Courier Prime', monospace;
    --font-body: 'Inter', sans-serif;

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* === Spacing (konsistentes Raster) === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* === Border Radius === */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
}

/* -----------------------------------------------------------------------
 * LIGHT THEME
 * ----------------------------------------------------------------------- */
:root.light-mode {
    --bg-main: #f0fdfa;
    --bg-surface: rgba(255, 255, 255, 0.75);
    --bg-surface-hover: rgba(255, 255, 255, 0.9);
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --bg-card: rgba(240, 253, 250, 0.6);

    --border-default: #e2e8f0;              /* slate-200 */
    --border-subtle: #cbd5e1;               /* slate-300 */
    --border-hover: #94a3b8;                /* slate-400 */

    --text-primary: #0f172a;                /* slate-900 */
    --text-secondary: #334155;              /* slate-700 */
    --text-muted: #64748b;                  /* slate-500 */
    --text-faint: #94a3b8;                  /* slate-400 */

    --shadow-panel: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}