:root {
  /* kleur, licht (hoofdversie); het beheer gebruikt deze oude tokens nog */
  --ground: #FBF4EA;        /* paginagrond, crème */
  --raised: #FFFFFF;        /* kaarten, panelen, mandje */
  --image-ground: #FFFFFF;  /* achtergrond van elk productbeeld */
  --ink: #241C16;           /* hoofdtekst en koppen */
  --ink-muted: #6A5E53;     /* metadata, hulptekst */
  --line: #E6D9C7;          /* randen, scheidingen */
  --beheer-groen: #1D5B45;    /* tafelgroen: primaire knop, woordmerk */
  --beheer-groen-op: #FBF4EA; /* tekst op beheer-groen */
  --apricot: #F2A35E;       /* vlakken, stickers, highlights */
  --apricot-on: #241C16;    /* tekst op apricot, nooit wit */
  --wine: #7C2D3B;          /* events en horeca */
  --stock-in: #1D5B45;      /* op voorraad */
  --stock-pre: #94490C;     /* preorder */
  --stock-out: #7A6E60;     /* uitverkocht, bewust neutraal */

  /* kleur van de winkel (docs/ontwerp/DESIGN.md onderdeel 2); winkel.css gebruikt enkel deze */
  --wit: #FFFFFF;            /* achtergrond van pagina's, kaarten, velden */
  --inkt: #241C16;           /* tekst */
  --gedempt: #6A5E53;        /* bijtekst, labels van filters, reeks op de kaart */
  --lijn: #ECE5DA;           /* randen van kaarten, scheidingslijnen */
  --lijn-sterk: #C9BBA8;     /* rand bij aanwijzen, rand van keuzevakjes en -rondjes */
  --veldrand: #DCD2C4;       /* rand van invoervelden */
  --vlak: #F5F2EE;           /* lichte vlakken: schakelaars, aanwijzen van kopknoppen */
  --sale: #C4161C;           /* sale: prijs, label SALE en kortingslabel (28 oktober 2026), in elke kleurrichting */
  --op-merk: #FFFFFF;        /* tekst en logo op de merkkleur (footer) */
  --op-merk-gedempt: #FFFFFFC7; /* bijtekst op de merkkleur: wit 78 % */
  --op-merk-lijn: #FFFFFF33;  /* scheidingslijn op de merkkleur: wit 20 % */
  --logo-goud: #D4AF37;      /* de draak in het logo (29 oktober 2026), in elke kleurrichting */
  --logo-oog: #FFFFFF;       /* het oog van de draak */

  /* kleurrichting (docs/voorstel-huisstijl.md; Instellingen > Winkel, data-kleur op <html>): A Speeltafelgroen is
     ook de standaard, B en C staan onderaan */
  --brand: #1E4A3A;          /* logo, footer, strook van een reeks zonder beeld */
  --action: #1E4A3A;         /* primaire knop, links, gekozen toestand, focusrand */
  --action-hover: #2B6B52;   /* knop bij aanwijzen */
  --tint: #E7F0EB;           /* toegevoegd, gekozen afhaalpunt, aangevinkte filter, bovenbalk */

  /* status, gelijk in elke kleurrichting; "Op voorraad" is --inkt met een vinkje */
  --status-preorder: #175CD3;      /* Preorder, Binnenkort */
  --status-preorder-vlak: #EFF4FF;
  --status-uit: #475467;           /* Uitverkocht, Volzet */
  --status-uit-vlak: #F2F4F7;
  --status-fout: #B42318;          /* foutmeldingen */
  --status-fout-vlak: #FEF3F2;

  /* schaduw */
  --shadow-card: 0 1px 0 #E6D9C7, 0 8px 24px -12px #6A5E5333;
  --schaduw-kaart: 0 6px 18px -10px #241C1633;  /* paneel (menu op gsm) */
  --schaduw-kaart-aanwijzen: 0 10px 24px -14px #241C1659; /* productkaart bij aanwijzen */
  --schaduw-keuze: 0 1px 3px #241C1626;         /* gekozen knop in een schakelaar */
  --schaduw-paneel: 0 24px 48px -24px #241C1673; /* uitklapmenu en zoeksuggesties */
  --schaduw-kop: 0 8px 20px -14px #241C1659;     /* compacte kop */
  --schaduw-tab: 0 2px 8px #00000040;            /* tab van de grote banner (zwart 25 %) */
  --schaduw-tab-actief: 0 3px 10px #00000059;    /* actieve (witte) tab: ligt boven de andere */
  --schaduw-tab-aanwijzen: 0 6px 14px #00000047; /* tab bij aanwijzen: groeit licht mee */
  --sluier: #241C1659;                           /* over de pagina achter een open menu */
  --overloop: #241C16E6;                         /* donkere overloop over het beeld van een reeks */

  /* lettertypes */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letter: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* alle tekst van de winkel */

  /* lettergroottes van de winkel, laptop (gsm hieronder) */
  --t-paginatitel: 40px;
  --t-sectie: 28px;
  --t-sectie-lijn: 32px;
  --t-kaarttitel: 16px;
  --t-kaarttitel-lijn: 22px;
  --t-reeks: 13px;
  --t-reeks-lijn: 18px;
  --t-tekst: 15px;
  --t-label: 11px;
  --t-label-hoogte: 22px;
  --t-prijs-kaart: 21px;

  /* afstanden */
  --space-1: 4px;   /* icoon tot label */
  --space-2: 8px;   /* tussen badge en tekst */
  --space-3: 12px;  /* binnen knoppen, verticaal */
  --space-4: 16px;  /* kaartpadding, knoppadding horizontaal */
  --space-5: 24px;  /* tussen kaarten in een raster */
  --space-6: 32px;  /* tussen secties */
  --space-7: 48px;  /* witruimte boven grote koppen */
  --space-8: 72px;  /* marges op affiches en Instagram */

  /* raster van de winkel */
  --inhoud: 1280px;   /* breedte van de inhoud op laptop (mockups, 28 oktober 2026; was 1200) */
  --marge-gsm: 16px;  /* marge links en rechts op gsm */

  /* afrondingen */
  --radius-s: 8px;      /* badges, invoervelden */
  --radius-m: 16px;     /* kaarten, panelen */
  --radius-l: 24px;     /* grote vlakken zoals de hero */
  --radius-pill: 999px; /* knoppen, statuslabels, filters */
  --r-kaart: 16px;      /* kaart */
  --r-beeld: 10px;      /* beeld in een kaart */
  --r-veld: 10px;       /* invoerveld */
  --r-mandknop: 8px;    /* mandknop op een kaart */
  --r-rond: 999px;      /* knoppen, labels, zoekveld */
  --r-logo: 6px;        /* kader rond een betaallogo */
  --r-paneel: 18px;     /* uitklapmenu en zoeksuggesties */
  --r-rij: 12px;        /* een regel in de zoeksuggesties */
  --r-mark: 3px;        /* gemarkeerde zoekterm */

  /* focus */
  --focus-dikte: 2px;
  --focus-afstand: 3px;

  color-scheme: light;
}

/* B Inkt met petrol */
:root[data-kleur="b"] {
  --brand: #1C1C1E;
  --action: #1F5F6B;
  --action-hover: #184C56;
  --tint: #E6EEF0;
}

/* C Bordeaux */
:root[data-kleur="c"] {
  --brand: #6E1F2F;
  --action: #6E1F2F;
  --action-hover: #8C2A3C;
  --tint: #F3E8EA;
}

@media (max-width: 640px) {
  :root {
    --t-sectie: 23px;
    --t-sectie-lijn: 28px;
    --t-kaarttitel: 15px;
    --t-kaarttitel-lijn: 20px;
    --t-reeks: 12px;
    --t-reeks-lijn: 16px;
    --t-label: 10px;
    --t-label-hoogte: 20px;
    --t-prijs-kaart: 19px;
  }
}