/* ============================================================================
   Design tokens — VTC De Ploeg
   ============================================================================
   Eén-op-één overgenomen uit de Figma-variabelencollectie "De Ploeg".
   De namen hieronder zijn bewust identiek aan die in Figma (bg/base wordt
   --bg-base), zodat een wijziging daar hier zonder vertaalslag te vinden is.

   Twee modes, maar géén themaschakelaar: het stramien is dat nav, hero en
   footer donker zijn en de middensecties ivoor. De lichte mode is dus een
   SECTIE-scope, geen voorkeur van de bezoeker. Vandaar:

     :root      -> Donker (de standaard)
     .licht     -> Licht  (zet op een <section>, blok of pagina)

   [data-thema="donker"|"licht"] doet hetzelfde, voor als er ooit tóch een
   schakelaar komt. Verder niets: geen media query op prefers-color-scheme,
   want de kleur hoort bij de sectie en niet bij het systeem van de bezoeker.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────
   Zelf gehost, niet via fonts.googleapis.com: de site zet geen cookies en
   doet geen verzoeken naar derden, en dat blijft zo (beslist 25 jul).
   Google leverde variabele fonts — één bestand dekt de hele gewichtsas,
   dus twee bestanden in plaats van zeven. Alleen de latijnse subset. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Kleur — mode Donker ─────────────────────────────────────────────── */
  --bg-base: #0a0a0a;
  --bg-surface: #141312;
  --bg-elevated: #1f1d1b;

  --accent-gold: #f0b429;
  --accent-gold-soft: #ffd966;
  --accent-red: #d6242b;

  --text-primary: #ffffff;
  --text-secondary: #b5afa4;
  --text-muted: #7c766d;
  --text-accent: #f0b429;

  --line-border: #33302c;
  --line-border-soft: #232120;

  /* Kleur van de tekst die BOVENOP accent-gold komt te staan (knoppen,
     badges). In donkere mode is dat de donkere achtergrond zelf. */
  --op-accent: #0a0a0a;

  /* ── Vorm ────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Ruimte ──────────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* ── Typografie ──────────────────────────────────────────────────────── */
  --font-kop: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ── Maatvoering ─────────────────────────────────────────────────────── */
  --breedte: 1140px;      /* de leesbreedte van het stramien */
  --breedte-smal: 720px;  /* voor lopende tekst */
}

.licht,
[data-thema='licht'] {
  --bg-base: #f5f1e6;
  --bg-surface: #ffffff;
  --bg-elevated: #ede7d8;

  --accent-gold: #f0b429;
  --accent-gold-soft: #7a5c0c;
  --accent-red: #c0201f;

  --text-primary: #17150f;
  --text-secondary: #4c4740;
  --text-muted: #8a8378;

  /* AFWIJKING VAN FIGMA — met opzet, en gemeten.
     Figma zegt text/accent = #8A6A10 voor de lichte mode. Die haalt 4,48:1 op
     bg/base (#F5F1E6) en 4,10:1 op bg/elevated (#EDE7D8). WCAG AA vraagt
     4,5:1 voor gewone tekst, dus die kleur zakt er in béíde gevallen onder —
     Lighthouse rekent het af als fout.

     In plaats van een nieuwe kleur te verzinnen nemen we een tint die al in
     dezelfde palet zit: accent/gold-soft uit de lichte mode. Die haalt 5,5:1
     op bg/base, 5,1:1 op bg/elevated en 6,2:1 op bg/surface.

     Dit hoort in Figma rechtgezet te worden, niet hier — zie
     site-vault/open_questions.md. */
  --text-accent: #7a5c0c;

  --line-border: #dcd3be;
  --line-border-soft: #e8e1d0;

  /* accent-gold is in béíde modes #F0B429 — een lichte, warme geel. Daar
     hoort donkere tekst op, ook hier. */
  --op-accent: #17150f;
}

[data-thema='donker'] {
  --bg-base: #0a0a0a;
  --bg-surface: #141312;
  --bg-elevated: #1f1d1b;
  --accent-gold-soft: #ffd966;
  --accent-red: #d6242b;
  --text-primary: #ffffff;
  --text-secondary: #b5afa4;
  --text-muted: #7c766d;
  --text-accent: #f0b429;
  --line-border: #33302c;
  --line-border-soft: #232120;
  --op-accent: #0a0a0a;
}