/* =====================================================
   WINMNL DESIGN SYSTEM — Warm Casino (black / brown / red / gold)
   Single source of truth for brand color values. style.css's own
   :root sources its matching --bg-*/--accent-* variables from here
   via var(...) — change a color here, it propagates everywhere.
   Loaded before style.css on every page (site-head.php), so any
   custom property collisions (e.g. --text-primary) resolve to
   style.css's later declaration; those are kept value-identical
   below so load order never matters.

   Superseded the earlier violet/cyan/magenta identity on 2026-09-13
   per explicit direction: near-black + dark warm brown/burgundy +
   deep casino red + champagne gold + bronze/copper, with purple/
   violet/magenta/blue/cyan removed as major UI accents.
   ===================================================== */
:root {
  /* ── Backgrounds & surfaces ───────────────────────── */
  --background-primary:   #0F0B0A;   /* near-black, warm */
  --background-secondary: #0A0706;   /* deepest — nav/sidebar */
  --surface:               #221917;   /* base card surface */
  --surface-elevated:      #2E211E;   /* raised card / modal / popover */
  --surface-section:       #171010;   /* section band, between primary and card */
  --surface-glass:         rgba(36,29,26,.55);
  --surface-glass-strong:  rgba(36,29,26,.74);  /* legibility-critical glass surfaces (dense text over busy content) */

  /* ── Text ──────────────────────────────────────────── */
  --text-primary:   #FFF6EB;  /* warm cream white — kept identical to style.css's own --text-primary */
  --text-secondary: #DCCDC2;
  --text-muted:     #A89A92;
  --text-gold:      #FBDFA0;

  /* ── Accents ───────────────────────────────────────── */
  --accent-primary:    #E0201A;  /* deep casino red — primary CTA/brand */
  --accent-primary-2:  #F7CB63;  /* champagne gold — lighter accent, hover/gradient stop, and the safe choice for small text on dark (verified ~11.8:1 contrast) */
  --accent-secondary:  #FF3B2A;  /* bright red — secondary highlight / active state */
  --accent-magenta:    #C46A3F;  /* copper — subtle warm highlight, used sparingly (was magenta) */
  --gold-light:        #FFE8B0;
  --gold-soft:         #E2AF4F;
  --gold-dark:         #A5701F;
  --bronze:             #8F4F2F;
  --red-bright:         #FF3B2A;
  --red-dark:           #7A0D0A;
  --red-deep:           #4A0908;

  /* ── Semantic (unchanged meaning, don't need reinventing) ── */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* ── Borders & glow ────────────────────────────────── */
  --border:       rgba(255,206,130,.20);
  --border-strong:rgba(235,50,36,.50);
  --glow-primary:   0 0 40px rgba(244,197,106,.4);
  --glow-secondary: 0 0 32px rgba(244,197,106,.3);
  --glow-soft:      0 0 20px rgba(244,197,106,.25);

  /* ── Radius scale ──────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* ── Control sizing ────────────────────────────────── */
  --btn-height:   46px;
  --input-height: 46px;

  /* ── Spacing scale ─────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Shadows ───────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.55);

  /* ── Glass / motion ────────────────────────────────── */
  --glass-blur: blur(20px);
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;

  /* ── Layout ────────────────────────────────────────── */
  --container-max: 1440px;
  --mobile-bottom-nav-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}