/* Mr. Auction – design-tokens (review V3-021, 05-11-2026; inventaris §6.3). Eén bron voor kleur, tekst, ruimte, radius
   en breekpunten; app.css en latere componentbestanden gebruiken alleen deze namen. Donker is de standaard (:root);
   het lichte blok staat twee keer: onder prefers-color-scheme (eerste render en zonder JavaScript volgt het systeem)
   en onder :root[data-thema="licht"] (cookie/themaknop wint). scripts/css_tokens_check.py controleert dat beide
   lichte blokken gelijk zijn en dat alle tekst/achtergrond-paren AA halen. Laad dit bestand vóór app.css. */
:root {
  /* Oppervlak */
  --grond: #121830;
  --vlak: #182040;
  --vlak-zacht: #151c38;
  --vlak-hoog: #222c55;
  /* Tekst */
  --inkt: #ffffff;
  --inkt-zacht: #c7ccda;
  --inkt-stil: #9aa2bc;
  /* Lijn (--lijn-sterk is de inputrand: >= 3:1 op --vlak, was #4a5678 = 2,2:1) */
  --lijn: #2e3a5c;
  --lijn-sterk: #616e93;
  /* Merk */
  --accent: #f07a2a;
  --accent-sterk: #f6a06a;
  --accent-zacht: rgba(240, 122, 42, .16);
  --accent-rgb: 240, 122, 42;
  --knop: #cc4505;
  --knop-inkt: #ffffff;
  --knop-hover: #b83d04;
  --focus: #f6a06a;
  /* Verloop eindigt op --knop (wit erop 4,75:1); eerder #e85008 = 3,76:1 */
  --verloop: linear-gradient(135deg, var(--knop-hover) 0%, var(--knop) 100%);
  /* Semantiek: elk met een zachte achtergrond voor chips en meldingen */
  --goed: #5cc98e;        --goed-zacht: rgba(92, 201, 142, .14);
  --let-op: #f2b544;      --let-op-zacht: rgba(242, 181, 68, .15);
  --fout: #ff7b73;        --fout-zacht: rgba(255, 123, 115, .14);
  --info: #8fb0e8;        --info-zacht: rgba(143, 176, 232, .16);
  --neutraal: #9aa2bc;    --neutraal-zacht: rgba(154, 162, 188, .16);
  --op-kleur: #ffffff;    /* tekst op verloop, knop, foto-sluier */
  /* Vast, in beide thema's gelijk: kentekenplaat en de sluier op foto's */
  --plaat-geel: #f5c400;
  --plaat-inkt: #111111;
  --plaat-blauw: #1f3fa3;
  --sluier: rgba(5, 8, 20, .62);
  /* Reeksen voor grafieken en balken (oranje/blauw blijft uit elkaar bij kleurenblindheid) */
  --reeks-1: #f07a2a; --reeks-2: #8fb0e8; --reeks-3: #5cc98e; --reeks-4: #f2b544;
  /* Kop, glas, schaduw */
  --kop-achter: rgba(18, 24, 48, .72);
  --glas: blur(16px) saturate(140%);
  --schaduw-1: 0 4px 12px -6px rgba(0, 0, 0, .5);
  --schaduw-2: 0 12px 32px -18px rgba(0, 0, 0, .7);
  --schaduw-boven: 0 -12px 24px -12px rgba(0, 0, 0, .45);
  /* Tekst: vier maten, drie koppen en één cijfermaat */
  --tekst-xs: .75rem;     /* overline, th, teller, chips */
  --tekst-s: .875rem;     /* hulp, meta, klein */
  --tekst-m: 1rem;        /* body */
  --tekst-l: 1.125rem;    /* lead, kaarttitel */
  --kop-3: 1rem;
  --kop-2: 1.25rem;
  --kop-1: clamp(1.6rem, 3vw, 2.1rem);
  --cijfer: clamp(1.5rem, 2.5vw, 2rem);
  /* Ruimte (naam = veelvoud van .25rem) */
  --r-1: .25rem; --r-2: .5rem; --r-3: .75rem; --r-4: 1rem; --r-5: 1.25rem; --r-6: 1.5rem; --r-8: 2rem; --r-12: 3rem;
  /* Radius */
  --rond-xs: 4px;         /* kleine foto's, kbd */
  --rond-s: 8px;          /* velden, kaart-in-kaart */
  --rond-m: 12px;         /* kaarten, meldingen */
  --rond-l: 16px;         /* blokken, paginavlakken */
  --rond-pil: 999px;
  /* Breekpunten, ter documentatie: een custom property werkt niet in @media, dus de getallen staan ook in app.css.
     480 telefoon · 768 tablet (tabellen stapelen) · 1024 klein scherm · 1300 menu op één regel */
  --bp-telefoon: 480px; --bp-tablet: 768px; --bp-klein: 1024px; --bp-breed: 1300px;
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

/* Oude namen als alias, zodat niets breekt tot alle componenten zijn gemigreerd (V3-022). Niet in nieuwe code gebruiken. */
:root {
  --vlak-vast: var(--vlak);
  --accent-2: var(--accent);
  --rond: var(--rond-l);
  --rond-klein: 10px;             /* gaat in V3-022 op in --rond-m */
  --schaduw: var(--schaduw-2);
  --glans: none;                  /* dood: was altijd none */
  --grond-gloed-1: transparent;   /* dood: de gloed is uitgezet */
  --grond-gloed-2: transparent;
  --rand: var(--lijn);            /* .afwijking gebruikte --rand zonder definitie (lichte fallback in donker thema) */
}

/* ---------- Thema licht (buiten, in de zon) ----------
   Eerste render en zonder JavaScript: volg het systeem, tenzij de cookie "donker" koos. */
@media (prefers-color-scheme: light) {
  :root:not([data-thema="donker"]) {
    --grond: #f4f5f8; --vlak: #ffffff; --vlak-zacht: #f4f5f8; --vlak-hoog: #e9ecf2;
    --inkt: #182040; --inkt-zacht: #3a4360; --inkt-stil: #5b647a;
    --lijn: #dde1ea; --lijn-sterk: #7f8aa6;
    --accent: #b83d04; --accent-sterk: #a33603; --accent-zacht: #fde9dd; --accent-rgb: 184, 61, 4;
    --knop: #b83d04; --knop-inkt: #ffffff; --knop-hover: #a33603; --focus: #1f3f70;
    --goed: #146e44; --goed-zacht: #ddf2e7; --let-op: #8a5200; --let-op-zacht: #fbefd9;
    --fout: #bf2419; --fout-zacht: #fbe6e4; --info: #2f5590; --info-zacht: #e6ecf7;
    --neutraal: #5b647a; --neutraal-zacht: #e6e9f0; --op-kleur: #ffffff;
    --reeks-1: #cc4505; --reeks-2: #2f5590; --reeks-3: #1e9c6c; --reeks-4: #b86e00;
    --kop-achter: rgba(255, 255, 255, .92);
    --schaduw-1: 0 4px 12px -6px rgba(24, 32, 64, .18); --schaduw-2: 0 8px 24px -12px rgba(24, 32, 64, .22); --schaduw-boven: 0 -12px 24px -12px rgba(24, 32, 64, .2);
    color-scheme: light;
  }
}
/* Expliciete keuze (cookie thema=licht, gezet door de themaknop). Zelfde waarden als hierboven. */
:root[data-thema="licht"] {
  --grond: #f4f5f8; --vlak: #ffffff; --vlak-zacht: #f4f5f8; --vlak-hoog: #e9ecf2;
  --inkt: #182040; --inkt-zacht: #3a4360; --inkt-stil: #5b647a;
  --lijn: #dde1ea; --lijn-sterk: #7f8aa6;
  --accent: #b83d04; --accent-sterk: #a33603; --accent-zacht: #fde9dd; --accent-rgb: 184, 61, 4;
  --knop: #b83d04; --knop-inkt: #ffffff; --knop-hover: #a33603; --focus: #1f3f70;
  --goed: #146e44; --goed-zacht: #ddf2e7; --let-op: #8a5200; --let-op-zacht: #fbefd9;
  --fout: #bf2419; --fout-zacht: #fbe6e4; --info: #2f5590; --info-zacht: #e6ecf7;
  --neutraal: #5b647a; --neutraal-zacht: #e6e9f0; --op-kleur: #ffffff;
  --reeks-1: #cc4505; --reeks-2: #2f5590; --reeks-3: #1e9c6c; --reeks-4: #b86e00;
  --kop-achter: rgba(255, 255, 255, .92);
  --schaduw-1: 0 4px 12px -6px rgba(24, 32, 64, .18); --schaduw-2: 0 8px 24px -12px rgba(24, 32, 64, .22); --schaduw-boven: 0 -12px 24px -12px rgba(24, 32, 64, .2);
  color-scheme: light;
}