/* Taxi Reijnders — merk-tokens v2026-10, herontwerp donker premium
   (spec online-marketing-2026/docs/superpowers/specs/2026-09-27-herontwerp-donker-premium-design.md §1).
   Bron van waarheid; site-v2/src/assets/css/tokens.css is een exacte kopie (test in site-v2).
   Regels: goud is het enige accent en nooit vlakvullend buiten knoppen en de prijsmarkering; boven de vouw
   hooguit drie gouden elementen. WhatsApp-groen alleen op WhatsApp-knoppen, met zwarte tekst. Lichte vlakken
   (de calculatorkaart) herdefiniëren de rollen lokaal met de --kaart-*-tokens (calculator.css). */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

:root {
  /* Palet (spec §1.2) */
  --zwart: #0B0D10;
  --vlak: #14181D;
  --vlak-hoog: #1C2127;
  --lijn: #2A3038;
  --tekst: #F5F3EE;
  --tekst-zacht: #A3AAB3;
  --goud: #C8A96A;
  --goud-licht: #DCC38D;
  --goud-donker: #A8894E;
  --wit: #FFFFFF;
  --whatsapp: #25D366;
  --whatsapp-donker: #1EB85A;
  --fout: #F97066;
  --ok: #47CD89;

  /* Afgeleid, niet in de spec-tabel: ter goedkeuring in poort 1, getoetst in test/contrast.test.mjs */
  --veldrand: #6B737D;            /* rand van invoervelden op donker: >= 3:1 op vlak en vlak-hoog */
  --kaart-achtergrond: #F5F3EE;   /* zachte vlakken binnen de calculatorkaart */
  --kaart-lijn: #E4E1DA;          /* haarlijnen binnen de kaart (decoratief) */
  --kaart-veldrand: #8C9199;      /* rand van invoervelden op wit: >= 3:1 */
  --kaart-tekst-zacht: #4B5159;   /* bijschriften op wit (spec: "TAXI" op licht) */
  --kaart-fout: #B42318;
  --kaart-ok: #1B7F4B;
  /* Leesvlak (eigenaar 2026-09-29): lange tekst op warm gebroken wit, zie sjablonen.css §4 */
  --papier: #F5F3EE;
  --papier-2: #ECE8E0;             /* FAQ direct na een leesvlak */
  --goud-op-licht: #7A5F2B;        /* goudtekst en links op papier: >= 4,5:1 */
  --goud-op-licht-hover: #5E4920;

  /* Rollen (donker); calculator.css herdefinieert ze binnen de kaart */
  --achtergrond: var(--zwart);
  --accent: var(--goud);          /* lijnen, focus, iconen (>= 3:1) */
  --accent-tekst: var(--goud);    /* tekst in accentkleur (>= 4,5:1) */
  --prijs: var(--goud);

  /* Typografie (spec §1.3) */
  --font-kop: 'Manrope', system-ui, sans-serif;
  --font-tekst: 'Inter', system-ui, sans-serif;
  --maat-kop-1: clamp(2.25rem, 1.35rem + 3.9vw, 4.5rem);   /* 36 px mobiel, 56–72 px desktop */
  --maat-kop-2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --maat-kop-3: 1.25rem;
  --maat-tekst: 1.0625rem;                                  /* 17 px */
  --maat-klein: 0.875rem;
  --maat-label: 0.8125rem;                                  /* 13 px: eyebrows, menu, knoppen */
  --maat-prijs: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);
  --spatiering-label: 0.1em;
  --spatiering-kop: -0.02em;
  --regel-tekst: 1.6;
  --regel-kop: 1.05;
  --breedte-tekst: 68ch;

  /* Afstanden en vorm */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-6: 1.5rem;
  --ruimte-8: 2rem;
  --ruimte-12: 3rem;
  --ruimte-16: 4rem;
  --sectie-ruimte: clamp(4rem, 2.4rem + 5.3vw, 8rem);       /* 64 px mobiel → 128 px desktop */
  --radius-klein: 10px;
  --radius: 14px;
  --radius-groot: 20px;                                     /* kaarten, calculatorkaart */
  --radius-knop: 999px;                                     /* knopvorm: besluit poort 1 */
  --schaduw-kaart: 0 24px 64px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.3);
  --breedte-inhoud: 76rem;
  --gutter: 1rem;                                           /* 16 px zijmarge op mobiel */
  --kop-hoogte: 4.5rem;

  /* Beweging (spec §3) */
  --duur-onthul: 600ms;
  --curve-onthul: cubic-bezier(0.2, 0.7, 0.2, 1);
  --stagger: 80ms;
}

body {
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  line-height: var(--regel-tekst);
  color: var(--tekst);
  background: var(--achtergrond);
}
h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 800;
  line-height: var(--regel-kop);
  letter-spacing: var(--spatiering-kop);
  color: var(--tekst);
}
h1 { font-size: var(--maat-kop-1); }
h2 { font-size: var(--maat-kop-2); }
h3 { font-size: var(--maat-kop-3); }
.prijs { font-family: var(--font-kop); font-weight: 800; font-size: var(--maat-prijs); color: var(--prijs); font-variant-numeric: tabular-nums; }
.label { font-family: var(--font-kop); font-weight: 700; font-size: var(--maat-label); letter-spacing: var(--spatiering-label); text-transform: uppercase; }