/* 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 {
  --secondary: #FEFC00; /* Tour Geel */
  --primary: #000000;
  --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;

  --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 */