/* tokens.css — design tokens (kleuren, maten, schaduwen) voor het vuelta-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 header.php).
   Kleurenschema: rood/geel (Vuelta a España). */
:root {
  /* Merkkleuren */
  --primary: #D2001C;
  --primary-hover: #A50016;
  --primary-light: #FBE1E4;
  --shade: #FFC72C;
  --text-color: #0A1E40;
  --background: #12131223;
  --white: #ffffff;
  --gray-dark: #320608;
  --gray-light: #cccccc39;

  --accent-green: #00C853;
  --accent-red: #D50000;
  --accent-orange: #FFC72C;
  --accent-secondary: #FFC72C; /* geel accent i.p.v. oranje, past bij het rood/geel-thema */
  --accent-secondary-hover: #E6B325;
  --color-secondary: rgb(0, 0, 0);
  --accent-orange1: #fc6401;

  --font-body: 'Montserrat', sans-serif;

  /* Info boxes */
  --info-box-green: #DFF0D8;
  --info-box-red: #F2DEDE;
  --info-box-border: 4px solid #777;
  --info-box-border-green: 4px solid green;
  --info-box-border-red: 4px solid red;

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

  /* Classificatie-truien (Vuelta): het rode leiderstrui-rood valt hier
     handig samen met --primary, dus geen apart --gc-jersey-token nodig.
     Mountain (bolletjestrui) is bij de Vuelta BLAUW i.p.v. het rood van de
     Tour de France — vandaar deze eigen token i.p.v. hergebruik van
     --accent-red. Punten (groen) is bij Tour én Vuelta hetzelfde. */
  --mountain-jersey: #0057B8;
  --points-jersey: #318F3F;
  /* Nu tour's leiderstrui (geel) wél afwijkt van diens --primary (zwart),
     krijgt elke ronde een expliciete --gc-jersey-token i.p.v. alleen
     tour een uitzondering te maken — hier gewoon een alias naar --primary. */
  --gc-jersey: var(--primary);
  --gc-jersey-text: var(--white);

  /* Basiskleur voor de "Vergelijk Deelnemers"-grafiek (stats.php) — normaal
     gewoon --primary, apart token zodat tour dit naar --secondary kan
     wijzigen zonder --primary zelf overal aan te passen. */
  --chart-color: var(--primary);
;

  /* Compat-aliassen voor geporte cycling-CSS (tour-module gebruikte deze
     namen rechtstreeks) — wijzen naar bestaande vuelta-tokens i.p.v. een
     tweede kleurdefinitie te onderhouden. */
  --secondary: var(--shade);
  --header-color: var(--white);
  --background-box: var(--white);
  --primary-dark: var(--primary-hover);
  --box-color-color: var(--primary);
  --text-color-light: var(--white);
  --info-box-gray: #cccccc39;
  --info-box-yellow: var(--shade);
  --info-box-border-yellow: 4px solid var(--shade);
  --info-box-background: var(--white);

  /* Vormtaal: gedeelde radius/schaduw/transitie-waarden voor dropdowns,
     tabellen, tabs, knoppen en modals. */
  --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.20);
  --transition-base: 0.2s ease;

  /* Border images/gradients */
  --border-gradient-country: linear-gradient(to right, red, red, yellow, yellow, yellow, red, red) 1;
  --border-image-country-header: linear-gradient(to right, red, red, yellow, yellow, red, red) 100% 1;
}

/* Breakpoints — geen CSS-variabelen mogelijk in @media-queries, gebruik
   alleen deze twee 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 */

/* Hero-banner voor de landingspagina (welkomstblok): rode achtergrond met
   vetgedrukte gele tekst, zelfde stijl als het rood/geel-beeldmerk. */
.vuelta-hero {
  background: var(--primary);
  color: var(--shade);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-family: var(--font-body);
}
.vuelta-hero h1, .vuelta-hero h2 {
  color: var(--shade);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem 0;
}
.vuelta-hero p {
  color: var(--white);
  margin: 0;
}

/* Kleine landingspagina-utilities (index.php) */
.logo-centered {
  max-width: 140px;
  margin: 0 auto 1rem;
  display: block;
}
.opacity-muted {
  opacity: 0.8;
}