/* tokens.css — design tokens (kleuren, maten, schaduwen) voor het ed-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). */
:root {
  /* Merkkleuren */
  --primary: #008F00;
  --primary-hover: #007300;
  --primary-light: #E7F5E7;
  --shade: #00D100;
  --text-color: #0A1E40;
  --background: #12131223;
  --white: #ffffff;
  --gray-dark: #320608;
  --gray-light: #cccccc39;

  --accent-green: #00C853;
  --accent-red: #D50000;
  --accent-orange: #fc6401;
  --accent-secondary: #fc6401; /* duplicaat van --accent-orange, bewust apart gehouden */
  --accent-secondary-hover: #e35a00;
  --color-secondary: rgb(0, 0, 0);

  --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);

  /* 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, white, white, white, blue, blue) 1;
  --border-image-country-header: linear-gradient(to right, red, red, white, white, blue, blue) 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 */