/* Super Caravans — design tokens (v0.1, 2026-09-18) */
:root{
  /* kleur */
  --sc-marine:#0A0F1C;        /* schil: header, hero, footer; tekst op wit */
  --sc-blue:#156BFF;          /* knoppen, prijs, links */
  --sc-blue-hover:#0F5AD9;
  --sc-blue-tint:#E8F0FF;     /* actieve filter, geselecteerde keuzekaart */
  --sc-white:#FFFFFF;         /* alle contentpagina's */
  --sc-surface:#EEF1F5;       /* filterbalk, lichte secties, foto-achtergrond */
  --sc-border:#DDE3EC;
  --sc-grey:#6B6F76;          /* labels, secundaire tekst (4,6:1 op wit) */
  --sc-ok:#1B7F4A;            /* vinkjes, WhatsApp-knop */
  --sc-amber:#9A5B00;         /* status gereserveerd (tekst) */
  --sc-amber-bg:#FFF4DC;
  --sc-whatsapp:#25D366;      /* alleen icoon */
  --sc-error:#C0392B;
  --sc-on-dark-muted:rgba(255,255,255,.72);
  --sc-dark-divider:rgba(255,255,255,.12);

  /* typografie */
  --sc-font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --sc-display:700 40px/44px var(--sc-font);   /* mobiel 32/36 */
  --sc-h1:700 32px/38px var(--sc-font);        /* mobiel 28/32 */
  --sc-h2:600 24px/30px var(--sc-font);
  --sc-h3:600 18px/24px var(--sc-font);
  --sc-price:700 22px/28px var(--sc-font);     /* + tabular-nums, kleur --sc-blue */
  --sc-body:400 16px/24px var(--sc-font);
  --sc-small:400 14px/20px var(--sc-font);
  --sc-label:600 12px/16px var(--sc-font);     /* uppercase, letter-spacing .06em */
  --sc-tracking-tight:-0.02em;

  /* maat */
  --sc-space-1:4px;--sc-space-2:8px;--sc-space-3:12px;--sc-space-4:16px;
  --sc-space-6:24px;--sc-space-8:32px;--sc-space-12:48px;--sc-space-16:64px;
  --sc-radius-control:6px;   /* knop, input, chip-vlak */
  --sc-radius-card:10px;
  --sc-radius-sheet:14px;
  --sc-radius-pill:999px;
  --sc-shadow-float:0 8px 24px rgba(10,15,28,.14);   /* sheet, menu; kaarten hebben géén schaduw */
  --sc-shadow-bar:0 -4px 16px rgba(10,15,28,.08);    /* vaste bodem-balk */
  --sc-touch-min:44px;--sc-control-h:48px;--sc-bar-h:56px;
  --sc-container:1200px;
  --sc-gutter:16px;          /* ≥641: 24px, ≥1024: 32–40px */
  --sc-focus:0 0 0 2px #fff,0 0 0 4px var(--sc-blue);
}
@media (min-width:641px){:root{--sc-gutter:24px}}
@media (min-width:1024px){:root{--sc-gutter:32px}}