/* tokens.css — design tokens (kleuren, maten, schaduwen) voor het tour-spel.
   base.css, components.css, match-cards.css, tables.css, header.css en
   modal.css lezen alleen var(--token) hiervandaan; dit bestand moet als
   eerste geladen worden (zie php/header.php). */

:root {
  /* --primary-hover ontbrak hier helemaal (wel gebruikt door components.css
     — bv. .btn-submit:hover — maar viel voor tour stil terug op niks),
     nu een donkerdere tint van --primary toegevoegd. */
  --secondary: #FEFC00; /* Tour Geel */
  --primary: #000000;
  --primary-hover: #333333;
  --background: #1a1a1d;
  --header-color: #FEFC00;
  --background-box: #f9f9f9;
  --primary-dark: #a34b67;
  --primary-light: #fdf9dc;
  --text-color: #1a1a1d;
  --text-color-light: #f9f9f9;
  --box-color-color: #FEFC00;
  --font-body: "Montserrat", sans-serif;
  --white: #f9f9f9;

  --points-jersey: #318F3F;
  --mountain-jersey: #CF0301;
  /* GC-truikleur (Maillot Jaune) — apart van --primary omdat tour's
     --primary zwart is (het beeldmerk zit hier in --secondary, geel). Voor
     giro/vuelta is dit gewoon hun --primary (rose/rood valt daar toevallig
     samen met de eigen leiderstrui). */
  --gc-jersey: var(--secondary);
  --gc-jersey-text: var(--primary);

  /* Donkerdere variant van --secondary: het felle Tour Geel (#FEFC00) is te
     licht om als dunne lijn/rand/tekst op een witte achtergrond te lezen
     (grafieklijn, dropdown-B-rand bij Vergelijk Deelnemers). */
  --secondary-dark: #F5CF27;

  /* Basiskleur voor de "Vergelijk Deelnemers"-grafiek (stats.php) — gedeeld
     valt dit terug op --primary, maar dat is voor tour zwart (onduidelijk
     als lijnkleur/vulling op een witte grafiek) — donkergeel i.p.v. */
  --chart-color: var(--secondary-dark);

  --gray-dark: #333333;
  --gray-light: #bfc3c9;

  --border-gradient-country: linear-gradient(
      to right,
      #0055A4,
      #0055A4,
      #f4f5f0,
      #EF4135,
      #EF4135
    )
    1;
  --border-image-country-header: linear-gradient(
      to right,
      #0055A4,
      #0055A4,
      #f4f5f0,
      #EF4135,
      #EF4135
    )
    100% 1;

  --accent-green: #00c853;
  --accent-red: #e10600;
  --accent-orange: #ff7f50;
  --accent-secondary: gold;

  --text-color-btn-sec: white;
  --border-color-btn-alt: white;
  --tab-button-color: white;

  --fieldset: white;
  --session-block: white;
  --match-card: white;
  --joker-block: white;
  --selected_round: white;

  /* Info boxes */
  --info-box-gray: #cccccc39;
  --info-box-green: #dff0d8;
  --info-box-red: #f2dede;
  --info-box-yellow: #f5dd27;
  --info-box-border: 4px solid #777;
  --info-box-border-green: 4px solid green;
  --info-box-border-red: 4px solid #e10600;
  --info-box-border-yellow: 4px solid #eed511;
  --info-box-background: white;

  --table-border: rgba(176, 170, 170, 0.692);
  --table-row-even: rgba(151, 151, 151, 0.14);
  --table-divider: white;

  /* Vormtaal: gedeelde radius/schaduw/transitie-waarden, zelfde patroon
     als ed/pl/pd. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(10, 30, 64, 0.08);
  --shadow-md: 0 4px 14px rgba(10, 30, 64, 0.12);
  --shadow-lg: 0 12px 32px rgba(10, 30, 64, 0.2);
  --transition-base: 0.2s ease;
}

/* Breakpoints — geen CSS-variabelen mogelijk in @media-queries, gebruik
   alleen deze waarden in nieuwe @media-blokken:
     @media (max-width: 768px) — "medium": nav klapt in tot hamburger-menu
     @media (max-width: 499px) — "small": layout wordt 1 kolom, compactere tabellen */