/* ============================================================
   SOLANA WORLD CUP 2026 — DESIGN TOKENS
   Retro-futurist Cowboy Bebop / gritty metal broadcast UI
   ============================================================ */

:root {
  /* --- Palette --- */
  --ink: #0c0e14;            /* near-black navy base */
  --ink-2: #11141c;
  --panel: #1a1d24;          /* gunmetal panel */
  --panel-2: #22262f;
  --metal-hi: #3a3f4a;
  --metal-lo: #14161c;
  --cream: #f2e3c2;
  --cream-dim: #c9bb9e;
  --orange: #e8762c;
  --orange-hot: #ff8c3a;
  --teal: #7fb0a8;
  --slate: #5b6e8c;
  --red: #c8281e;
  --red-hot: #e83a2e;
  --gold: #d4af6a;
  --gold-hot: #f0cd85;
  --silver: #b8bcc4;

  /* --- Rarity --- */
  --rarity-common: var(--silver);
  --rarity-epic: var(--gold);
  --rarity-legendary: #c9f;

  /* --- Type --- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-mono: 'Chakra Petch', 'Courier New', monospace;
  --font-jp: 'Noto Sans JP', sans-serif;

  /* --- Spacing / radii --- */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;
  --r-pill: 999px;
  --r-panel: 14px;
  --r-btn: 10px;

  /* --- Texture helpers --- */
  --scanlines: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  --dotgrid: radial-gradient(rgba(242, 227, 194, 0.07) 1.2px, transparent 1.3px);
  --metal-brush: linear-gradient(
    160deg,
    var(--metal-hi) 0%,
    var(--panel) 18%,
    var(--panel-2) 40%,
    var(--metal-lo) 75%,
    var(--panel) 100%
  );
  --holo: linear-gradient(
    115deg,
    #ff5f6d, #ffc371, #f9f871, #6ee78a, #5bc8f7, #9b7bff, #ff5f6d
  );

  /* --- Glows --- */
  --glow-gold: 0 0 12px rgba(212, 175, 106, 0.55), 0 0 36px rgba(212, 175, 106, 0.25);
  --glow-red: 0 0 12px rgba(200, 40, 30, 0.6);
  --glow-amber: 0 0 24px rgba(232, 118, 44, 0.5), 0 0 80px rgba(232, 118, 44, 0.2);
}