/* =====================================================================
   Sam奧數遊戲 - Design tokens (HUD Cyberpunk + Warm Friendly)
   Single source of truth for colors, typography, spacing, motion.
   ===================================================================== */

:root {
    /* ---------- Color: deep space base ---------- */
    --c-bg-0: #060818;          /* deepest space */
    --c-bg-1: #0a0e27;          /* primary dark */
    --c-bg-2: #131a3a;          /* panel */
    --c-bg-3: #1c2452;          /* raised panel */
    --c-bg-glass: rgba(28, 36, 82, 0.55);

    /* ---------- Neon accents ---------- */
    --c-neon-cyan:    #00f0ff;
    --c-neon-magenta: #ff2d92;
    --c-neon-gold:    #ffd60a;
    --c-neon-violet:  #af52de;
    --c-neon-lime:    #b4ff39;
    --c-neon-red:     #ff3b30;

    /* ---------- Friendly palette (per chapter) ---------- */
    --c-chapter-1: #5ac8fa;     /* Bronze - sky blue */
    --c-chapter-2: #34c759;     /* Silver - green */
    --c-chapter-3: #ffd60a;     /* Gold   - yellow */
    --c-chapter-4: #af52de;     /* Platinum - violet */
    --c-chapter-5: #ff2d55;     /* Diamond - hot pink */

    /* ---------- Text ---------- */
    --c-text-0: #ffffff;
    --c-text-1: #e8edff;
    --c-text-2: #a8b1d8;
    --c-text-3: #6b73a8;
    --c-text-on-neon: #060818;

    /* ---------- State ---------- */
    --c-success: #34c759;
    --c-warning: #ffd60a;
    --c-danger:  #ff3b30;
    --c-info:    #5ac8fa;

    /* ---------- Gradients ---------- */
    --grad-hero: radial-gradient(ellipse at top, #1c2452 0%, #0a0e27 45%, #060818 100%);
    --grad-neon: linear-gradient(135deg, #00f0ff 0%, #af52de 50%, #ff2d92 100%);
    --grad-warm: linear-gradient(135deg, #ffd60a 0%, #ff2d92 100%);
    --grad-gold: linear-gradient(135deg, #ffe55c 0%, #ffa500 50%, #ff2d55 100%);
    --grad-card: linear-gradient(160deg, rgba(28,36,82,0.85) 0%, rgba(10,14,39,0.85) 100%);

    /* ---------- Typography ---------- */
    --font-display: 'Orbitron', 'Rajdhani', 'Noto Sans TC', system-ui, sans-serif;
    --font-body:    'Noto Sans TC', 'Inter', system-ui, -apple-system, sans-serif;
    --font-num:     'Baloo 2', 'Orbitron', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.5rem;
    --fs-3xl: 4rem;
    --fs-4xl: 6rem;

    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-normal: 1.55;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-black: 900;

    /* ---------- Spacing (8pt-ish scale) ---------- */
    --sp-0: 0;
    --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;

    /* ---------- Radius ---------- */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;

    /* ---------- Shadows / Glow ---------- */
    --glow-cyan:    0 0 24px rgba(0, 240, 255, 0.55), 0 0 48px rgba(0, 240, 255, 0.25);
    --glow-magenta: 0 0 24px rgba(255, 45, 146, 0.55), 0 0 48px rgba(255, 45, 146, 0.25);
    --glow-gold:    0 0 24px rgba(255, 214, 10, 0.55), 0 0 48px rgba(255, 214, 10, 0.25);
    --shadow-card:  0 10px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-pop:   0 24px 64px rgba(0, 0, 0, 0.6);

    /* ---------- Motion ---------- */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 150ms;
    --dur-norm: 280ms;
    --dur-slow: 480ms;
    --dur-epic: 900ms;

    /* ---------- Layout ---------- */
    --container-max: 1200px;
    --container-narrow: 720px;
    --header-h: 72px;
    --radius-border: 1px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Age-mode adaptive font scaling ---------- */
.mode-kid { font-size: 18px; }
.mode-teen { font-size: 16px; }
.mode-adult { font-size: 15px; }