/* ROOT VARIABLES - The DNA of the Design System */
:root {
    color-scheme: dark;
    /* --- PRIMITIVE TOKENS (The Raw Palette) --- */

    /* NEUTRAL: Slate (The Foundation - Cool Grey) */
    --slate-50: #f8fafc;
    /* Text High Contrast */
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    /* Body Text */
    --slate-400: #94a3b8;
    /* Muted Text */
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    /* Card Background */
    --slate-900: #0f172a;
    /* Main Background */
    --slate-950: #020617;
    /* Deepest Background (OLED Safe) */

    /* PRIMARY: Indigo (Focus & Action) */
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    /* Primary Button / Link */
    --indigo-600: #4f46e5;
    /* Hover State */

    /* ACCENT: Cyan (AI Intelligence & Generative Features) */
    --cyan-400: #22d3ee;
    --cyan-500: #06b6d4;

    /* SEMANTIC: Feedback Colors (Anxiety Reduction Optimized) */
    --success-green: #10b981;
    /* Emerald-500 - Clear but natural */
    --warning-amber: #f59e0b;
    /* Amber-500 - Attention without panic */
    --error-soft: #f87171;
    /* Red-400 - Softened, not aggressive */
    --error: #ef4444;

    /* --- SEMANTIC TOKENS (The Logic Layer) --- */

    /* Backgrounds */
    --bg-primary: var(--slate-950);
    /* Mapped to existing generic name */
    --bg-secondary: var(--slate-900);
    /* Mapped to existing generic name */
    --bg-app: var(--slate-950);
    /* The main page background */
    --bg-card: var(--slate-900);
    /* Content containers */
    --bg-input: var(--slate-800);
    /* Form inputs */
    --bg-glass: rgba(15, 23, 42, 0.7);
    /* Glassmorphic overlay base */
    --bg-overlay: rgba(15, 23, 42, 0.7);
    --bg-overlay-heavy: rgba(15, 23, 42, 0.9);
    --bg-overlay-light: rgba(15, 23, 42, 0.35);
    --bg-surface-alt: rgba(30, 41, 59, 0.6);
    --bg-surface-alt-heavy: rgba(30, 41, 59, 0.9);
    --bg-scrim: rgba(0, 0, 0, 0.6);
    --bg-scrim-heavy: rgba(2, 6, 23, 0.7);
    --bg-ambient-1: rgba(99, 102, 241, 0.07);
    --bg-ambient-2: rgba(34, 211, 238, 0.06);

    /* Text */
    --text-primary: var(--slate-50);
    /* Headings - Max Contrast */
    --text-secondary: var(--slate-300);
    /* Mapped to existing generic name */
    --text-body: var(--slate-300);
    /* Long form text - Reduced Contrast for comfort */
    --text-muted: var(--slate-400);
    /* Metadata/Labels */

    /* Borders */
    --border: var(--slate-800);
    --border-subtle: var(--slate-800);
    --border-focus: var(--indigo-500);
    --border-card: rgba(148, 163, 184, 0.12);
    --border-alpha: rgba(148, 163, 184, 0.12);
    --border-alpha-medium: rgba(148, 163, 184, 0.22);
    --border-alpha-strong: rgba(148, 163, 184, 0.45);
    --border-white-subtle: rgba(255, 255, 255, 0.1);

    /* Accents & Status */
    --accent: var(--indigo-500);
    /* Mapped to existing generic name */
    --accent-glow: rgba(99, 102, 241, 0.5);
    /* Indigo glow */
    --accent-alpha-subtle: rgba(99, 102, 241, 0.12);
    --accent-alpha-medium: rgba(99, 102, 241, 0.4);
    --accent-alpha-strong: rgba(99, 102, 241, 0.6);
    --success: var(--success-green);
    --glass: var(--bg-glass);
    --feedback-correct-bg: #065f46;
    --feedback-correct-border: #10b981;
    --feedback-wrong-bg: #991b1b;
    --feedback-wrong-border: #ef4444;
    --status-glow-success: 0 2px 10px rgba(16, 185, 129, 0.4);
    --status-glow-blue: 0 0 12px rgba(34, 211, 238, 0.5);
    --status-glow-warning: 0 0 12px rgba(245, 158, 11, 0.45);
    --gradient-brand: linear-gradient(to right, #60a5fa, #a78bfa);
    --gradient-hero-text: linear-gradient(to bottom right, #ffffff, #94a3b8);

    /* --- TYPOGRAPHY TOKENS --- */
    --font-display: 'Space Grotesk', monospace;
    /* AI/Technical feel */
    --font-body: 'Inter', sans-serif;
    /* High legibility */

    /* Fluid Type Scale (clamp for responsiveness) */
    --text-xs: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
    --text-sm: clamp(0.9375rem, 0.89rem + 0.18vw, 1.03rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.35rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);

    /* Surface / depth */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
    --shadow-elevated: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
    --bg-card-gradient: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.85));

    /* Sizing */
    --min-touch: 2.75rem;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;

        --bg-primary: #ffffff;
        --bg-secondary: #f1f5f9;
        --bg-app: #f8fafc;
        --bg-card: #ffffff;
        --bg-input: #f1f5f9;
        --bg-glass: rgba(255, 255, 255, 0.7);
        --bg-overlay: rgba(255, 255, 255, 0.78);
        --bg-overlay-heavy: rgba(255, 255, 255, 0.92);
        --bg-overlay-light: rgba(255, 255, 255, 0.45);
        --bg-surface-alt: rgba(241, 245, 249, 0.84);
        --bg-surface-alt-heavy: rgba(226, 232, 240, 0.95);
        --bg-scrim: rgba(15, 23, 42, 0.18);
        --bg-scrim-heavy: rgba(15, 23, 42, 0.32);
        --bg-ambient-1: rgba(79, 70, 229, 0.08);
        --bg-ambient-2: rgba(14, 165, 233, 0.08);

        --text-primary: #0f172a;
        --text-secondary: #475569;
        --text-body: #334155;
        --text-muted: #64748b;

        --border: #e2e8f0;
        --border-subtle: #e2e8f0;
        --border-focus: #4f46e5;
        --border-card: rgba(0, 0, 0, 0.08);
        --border-alpha: rgba(15, 23, 42, 0.08);
        --border-alpha-medium: rgba(15, 23, 42, 0.14);
        --border-alpha-strong: rgba(15, 23, 42, 0.26);
        --border-white-subtle: rgba(15, 23, 42, 0.06);

        --accent: #4f46e5;
        --accent-glow: rgba(79, 70, 229, 0.25);
        --accent-alpha-subtle: rgba(79, 70, 229, 0.12);
        --accent-alpha-medium: rgba(79, 70, 229, 0.24);
        --accent-alpha-strong: rgba(79, 70, 229, 0.36);

        --feedback-correct-bg: #d1fae5;
        --feedback-correct-border: #10b981;
        --feedback-wrong-bg: #fee2e2;
        --feedback-wrong-border: #ef4444;
        --status-glow-success: 0 1px 6px rgba(16, 185, 129, 0.2);
        --status-glow-blue: 0 0 8px rgba(14, 165, 233, 0.22);
        --status-glow-warning: 0 0 8px rgba(245, 158, 11, 0.2);
        --gradient-brand: linear-gradient(to right, #3b82f6, #7c3aed);
        --gradient-hero-text: linear-gradient(to bottom right, #0f172a, #64748b);

        --shadow-card: 0 12px 28px -18px rgba(15, 23, 42, 0.18), 0 6px 12px -10px rgba(15, 23, 42, 0.12);
        --shadow-card-hover: 0 18px 36px -20px rgba(15, 23, 42, 0.2), 0 12px 22px -16px rgba(15, 23, 42, 0.14);
        --shadow-elevated: 0 28px 54px -24px rgba(15, 23, 42, 0.24);
        --bg-card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98));
    }
}