/* ============================================================
   GameHub — CSS Custom Properties
   All design tokens live here. Import first in every page.
   ============================================================ */

:root {
    /* ── Colors: Background ─────────────────────────────────── */
    --bg-primary:      #f5f5ff;
    --bg-secondary:    #eeeef8;
    --bg-tertiary:     #e4e4f2;
    --bg-card:         rgba(255, 255, 255, 0.75);
    --bg-card-hover:   rgba(255, 255, 255, 0.95);
    --bg-input:        rgba(255, 255, 255, 0.85);
    --bg-overlay:      rgba(30, 27, 75, 0.55);

    /* ── Colors: Borders ────────────────────────────────────── */
    --border:          rgba(99, 86, 192, 0.15);
    --border-strong:   rgba(99, 86, 192, 0.28);
    --border-focus:    var(--neon-cyan);

    /* ── Colors: Pastel Palette ─────────────────────────────── */
    --neon-cyan:       #0ea5e9;
    --neon-cyan-dim:   rgba(14, 165, 233, 0.2);
    --neon-purple:     #8b5cf6;
    --neon-purple-dim: rgba(139, 92, 246, 0.2);
    --neon-pink:       #ec4899;
    --neon-pink-dim:   rgba(236, 72, 153, 0.2);
    --neon-green:      #10b981;
    --neon-green-dim:  rgba(16, 185, 129, 0.2);
    --neon-orange:     #f97316;
    --neon-yellow:     #f59e0b;

    /* ── Colors: Semantic ───────────────────────────────────── */
    --color-primary:   var(--neon-cyan);
    --color-secondary: var(--neon-purple);
    --color-danger:    var(--neon-pink);
    --color-success:   var(--neon-green);
    --color-warning:   var(--neon-orange);

    /* ── Colors: Text ───────────────────────────────────────── */
    --text-primary:    #1e1b4b;
    --text-secondary:  #4c4980;
    --text-muted:      #9190b0;
    --text-inverse:    #ffffff;

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    --fs-xs:   0.75rem;     /* 12px */
    --fs-sm:   0.875rem;    /* 14px */
    --fs-base: 1rem;        /* 16px */
    --fs-lg:   1.125rem;    /* 18px */
    --fs-xl:   1.375rem;    /* 22px */
    --fs-2xl:  1.75rem;     /* 28px */
    --fs-3xl:  2.25rem;     /* 36px */
    --fs-4xl:  3rem;        /* 48px */
    --fs-5xl:  4rem;        /* 64px */

    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;
    --fw-black:   900;

    --lh-tight:  1.2;
    --lh-base:   1.6;
    --lh-relaxed: 1.8;

    /* ── Spacing ─────────────────────────────────────────────── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ── Layout ──────────────────────────────────────────────── */
    --container-max:   1280px;
    --container-wide:  1600px;
    --sidebar-w:       320px;
    --header-h:        64px;
    --game-card-min:   240px;

    /* ── Border Radius ───────────────────────────────────────── */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   14px;
    --r-xl:   20px;
    --r-2xl:  28px;
    --r-full: 9999px;

    /* ── Shadows & Glows ─────────────────────────────────────── */
    --shadow-sm:         0 2px 8px rgba(99, 86, 192, 0.08);
    --shadow-md:         0 4px 20px rgba(99, 86, 192, 0.12);
    --shadow-lg:         0 8px 40px rgba(99, 86, 192, 0.18);

    --glow-cyan:         0 0 20px rgba(14, 165, 233, 0.3);
    --glow-cyan-strong:  0 0 40px rgba(14, 165, 233, 0.4), 0 0 80px rgba(14, 165, 233, 0.15);
    --glow-purple:       0 0 20px rgba(139, 92, 246, 0.3);
    --glow-pink:         0 0 20px rgba(236, 72, 153, 0.3);

    /* ── Transitions ─────────────────────────────────────────── */
    --t-fast:   100ms ease;
    --t-base:   200ms ease;
    --t-slow:   350ms ease;
    --t-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Glass Effect ────────────────────────────────────────── */
    --glass-bg:     rgba(255, 255, 255, 0.55);
    --glass-border: rgba(99, 86, 192, 0.12);
    --glass-blur:   blur(12px) saturate(1.5);
}