/* ═══════════════════════════════════════════════════════════════
   GOLDEN ERA LEAGUE — Design Tokens
   8px grid · WCAG-AA · Throwback Gold × Tactical HUD
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── DEPTH LAYERS (4-layer dark) ─────────────────────────── */
  --bg-void:     #030406;   /* page base — near black */
  --bg-base:     #06070a;   /* primary background */
  --bg-1:        #0a0c10;   /* section fills */
  --bg-2:        #111317;   /* cards, panels */
  --bg-3:        #191c22;   /* elevated cards */
  --bg-4:        #22262e;   /* inputs, tooltips */

  /* ─── GOLD RAMP ────────────────────────────────────────────── */
  --gold:           #d4af37;   /* classic prestige gold */
  --gold-bright:    #ffb800;   /* champion / highlight */
  --gold-hot:       #ffd700;   /* glow peak */
  --gold-dim:       #8a7020;   /* muted / disabled state */
  --gold-ghost:     rgba(212, 175, 55, 0.08);  /* subtle fill */
  --gold-glow:      rgba(255, 184, 0, 0.35);   /* outer glow */
  --gold-glow-sm:   rgba(255, 184, 0, 0.18);

  /* ─── PER-GAME TINTS ───────────────────────────────────────── */
  --bo1-steel:      #4a7fa5;   /* BO1 — cooler steel/teal */
  --bo1-steel-dim:  rgba(74, 127, 165, 0.15);
  --bo2-amber:      #c87941;   /* BO2 — warmer orange/amber */
  --bo2-amber-dim:  rgba(200, 121, 65, 0.15);

  /* ─── SYSTEM ACCENTS ───────────────────────────────────────── */
  --red:        #e03c3c;   /* loss / danger */
  --green:      #3cba6e;   /* win / up */
  --cyan:       #3cb8c8;   /* live indicator */
  --white:      #ffffff;

  /* ─── TEXT HIERARCHY ───────────────────────────────────────── */
  --text-primary:     #f0ede8;   /* near-white, warm */
  --text-secondary:   rgba(240, 237, 232, 0.70);
  --text-tertiary:    rgba(240, 237, 232, 0.42);
  --text-quaternary:  rgba(240, 237, 232, 0.22);
  --text-gold:        var(--gold-bright);
  --text-muted:       #5a5e66;

  /* ─── BORDERS / SEPARATORS ─────────────────────────────────── */
  --border:         rgba(255, 255, 255, 0.07);
  --border-hover:   rgba(255, 255, 255, 0.14);
  --border-gold:    rgba(212, 175, 55, 0.40);
  --border-gold-hot:rgba(255, 184, 0, 0.65);
  --sep:            rgba(255, 255, 255, 0.05);

  /* ─── PRESTIGE RANK COLOR RAMP ────────────────────────────── */
  --rank-private:   #606060;   /* P0  — grey, entry */
  --rank-corporal:  #8a8a8a;   /* P1  — silver */
  --rank-sergeant:  #4a7fa5;   /* P2  — steel blue */
  --rank-lieutenant:#3cba6e;   /* P3  — green */
  --rank-captain:   #c87941;   /* P4  — amber */
  --rank-colonel:   #d4af37;   /* P5  — gold */
  --rank-general:   #ffb800;   /* P6  — bright gold */
  --rank-prestige:  #ff5500;   /* P7-P9 — orange danger */
  --rank-legend:    #e03c3c;   /* P10 — red legend */
  --rank-dogtag:    #ffd700;   /* MAX — pure gold */

  /* ─── FONTS ────────────────────────────────────────────────── */
  --font-display:   'Black Ops One', 'Impact', sans-serif;
  --font-slab:      'Barlow Condensed', 'Black Ops One', sans-serif;
  --font-condensed: 'Oxanium', 'Arial Narrow', sans-serif;
  --font-body:      'Rajdhani', 'Arial', sans-serif;
  --font-data:      'JetBrains Mono', 'Courier New', monospace;

  /* ─── 8PX SPACING SCALE ────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   16px;
  --sp-4:   24px;
  --sp-5:   32px;
  --sp-6:   40px;
  --sp-7:   48px;
  --sp-8:   56px;
  --sp-9:   64px;
  --sp-10:  80px;
  --sp-11:  96px;
  --sp-12: 128px;

  /* ─── BORDER RADIUS ────────────────────────────────────────── */
  --r-sm:    2px;
  --r-md:    4px;
  --r-card:  8px;
  --r-chip:  4px;
  --r-pill:  99px;

  /* ─── CLIP PATHS (tactical HUD corners) ────────────────────── */
  --clip-panel:  polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  --clip-card:   polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  --clip-btn:    polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  --clip-badge:  polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

  /* ─── SHADOWS ───────────────────────────────────────────────── */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.40);
  --shadow-panel:   0 8px 48px rgba(0,0,0,0.65), 0 2px 12px rgba(0,0,0,0.45);
  --shadow-gold:    0 0 32px var(--gold-glow), 0 0 8px var(--gold-glow-sm);
  --shadow-champion:0 0 80px rgba(255,184,0,0.45), 0 0 32px rgba(255,184,0,0.25), 0 8px 48px rgba(0,0,0,0.70);

  /* ─── Z-INDEX LAYERS ────────────────────────────────────────── */
  --z-base:    0;
  --z-card:   10;
  --z-sticky: 50;
  --z-nav:   100;
  --z-ticker: 90;
  --z-modal: 200;
  --z-toast: 300;

  /* ─── TRANSITIONS ───────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   0.15s;
  --dur-mid:    0.28s;
  --dur-slow:   0.55s;

  /* ─── LAYOUT ────────────────────────────────────────────────── */
  --max-w:  1280px;
  --nav-h:  64px;

}