/* ============================================================
   Typer Mundial 2026 — Design Tokens
   Brand: czerń / biel / ZŁOTO + system gospodarzy (CAN/MEX/USA)
   ============================================================ */

:root {
  /* — Bohater: złoto trofeum — */
  --gold:        #F2C14E;
  --gold-bright: #FFD874;
  --gold-deep:   #C8962A;
  --gold-soft:   #FFE7A8;

  /* — Baza: stadion nocą — */
  --ink:    #0A0A11;   /* tło główne */
  --ink-2:  #11111C;   /* sekcja wyniesiona */
  --ink-3:  #181826;   /* karta */
  --ink-4:  #22222F;   /* karta hover / input */

  /* — Linie i obrysy — */
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-gold:   rgba(242, 193, 78, 0.35);

  /* — Tekst — */
  --paper:  #F7F6F1;
  --text:   #ECEBE4;
  --muted:  #9B9BAC;
  --faint:  #62626F;

  /* — System krajów-gospodarzy — */
  --can-red:   #E4002B;
  --mex-green: #00875A;
  --usa-blue:  #2D6CDF;

  /* — Stan/semantyka — */
  --win:   #00875A;
  --live:  #E4002B;
  --info:  #2D6CDF;

  /* — Typografia — */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;

  /* — Promienie — */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* — Cienie — */
  --shadow:     0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 10px 40px rgba(242, 193, 78, 0.18);

  /* — Rytm — */
  --gap: 16px;
  --pad: 20px;
  --max: 480px; /* mobile-first kontener */
}