/* ============================================================
   Feestkanaal — tokens
   ------------------------------------------------------------
   Overgenomen uit site/mockups/tokens.css, aangevuld met de
   schalen die daar nog niet in zaten (type, ruimte, focus,
   motion). Regel blijft: layouts gebruiken ALLEEN variabelen,
   nooit een los hexje.

   VASTGELEGD  = zat al in de mockup, is met opzet zo
   VOORSTEL    = nieuw, mag de designsessie omgooien
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ── fonts · VASTGELEGD (keuze nog open, zie handover §5) ──── */
:root {
  --font-head: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --head-weight: 800;
  --head-track: -.03em;
}
[data-font="outfit"]    { --font-head: 'Outfit', sans-serif;               --font-body: 'Outfit', sans-serif;  --head-weight: 800; --head-track: -.03em; }
[data-font="bricolage"] { --font-head: 'Bricolage Grotesque', sans-serif;  --font-body: 'Archivo', sans-serif; --head-weight: 700; --head-track: -.02em; }
[data-font="archivo"]   { --font-head: 'Archivo', sans-serif;              --font-body: 'Archivo', sans-serif; --head-weight: 800; --head-track: -.025em; }

/* ── typeschaal · VOORSTEL ──────────────────────────────────
   Body op 17px omdat de mockup dat doet en het goed leest op
   stadspagina's van 600 woorden. Vloeiend waar het groot wordt,
   vast waar het klein wordt — een caption hoort niet te schalen. */
:root {
  --t-2xs:  .78rem;   /* labels, eyebrow, tag */
  --t-xs:   .86rem;   /* microcopy, bijschrift */
  --t-sm:   .92rem;   /* secundair, nav */
  --t-base: 1.0625rem;/* 17px — lopende tekst */
  --t-lead: 1.06rem;  /* introzin onder een kop */
  --t-h3:   1.1rem;
  --t-h2:   clamp(1.85rem, 3.4vw, 2.6rem);
  --t-h1:   clamp(2.4rem, 5vw, 4rem);
  --t-num:  clamp(2.6rem, 5vw, 3.6rem);  /* prijs als beeldmerk */

  --lh-tight: 1.08;   /* koppen */
  --lh-snug:  1.45;   /* microcopy */
  --lh-body:  1.6;    /* alinea's */

  --w-body: 400;
  --w-med:  600;
  --w-semi: 650;      /* de mockup gebruikt 650 bewust: 700 is te hard in lopende tekst */
  --w-bold: 700;

  --measure: 56ch;    /* max leesbreedte alinea */
  --measure-h: 26ch;  /* max breedte kop */
}

/* ── ruimteschaal · VOORSTEL ────────────────────────────────
   4-punts basis. Sectieritme verschilt met opzet per gewicht:
   de configurator krijgt lucht, de stedenstrook bijna niets. */
:root {
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px; --s7: 32px;  --s8: 40px;  --s9: 56px;  --s10: 72px;
  --s11: 88px; --s12: 108px;

  --sec-y:      var(--s11);  /* standaard sectie */
  --sec-y-lg:   var(--s12);  /* zwaartepunt (configurator) */
  --sec-y-sm:   var(--s9);   /* strook */
  --wrap:        1140px;
  --wrap-narrow:  860px;
  --gutter:       24px;
}

/* ── vorm en diepte · VASTGELEGD ────────────────────────────── */
:root {
  --r-sm:   10px;   /* kleine knop, chip */
  --r-fld:  11px;   /* invoerveld */
  --r-btn:  12px;
  --r:      14px;   /* kaart */
  --r-lg:   20px;   /* groot blok */
  --r-pill: 100px;
  /* aliassen voor de oude namen uit de mockup */
  --radius: var(--r); --radius-lg: var(--r-lg);
}

/* ── focus en motion · VOORSTEL ─────────────────────────────
   Eén focusstijl voor de hele site. Nu staat hij op drie
   plekken verschillend in v2.html. */
:root {
  --focus-w: 3px;
  --focus-c: var(--ch3);
  --focus-off: 2px;
  --dur-fast: .14s;
  --dur:      .22s;
  --ease:     cubic-bezier(.33, 1, .68, 1);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-w) solid var(--focus-c);
  outline-offset: var(--focus-off);
  border-radius: 4px;
}

/* ============================================================
   PALETTEN — één van deze drie wordt het. Zie handover §4.
   ============================================================ */

/* ── palet 1 · KANAAL (standaard) — wit, blauw ─────────────── */
:root, [data-pal="kanaal"] {
  --bg: #ffffff; --surface: #ffffff; --wash: #f5f7fa;
  --ink: #12141a; --soft: #5a6272; --line: #e3e7ee;
  --brand: #2f5fff; --brand-d: #1f45cc; --on-brand: #ffffff;
  --ink-surf: #12141a; --on-ink: #ffffff; --ink-soft-on: #a8b0c0;
  --ch1: #17b968; --ch2: #ff3b3b; --ch3: #2f5fff;
  --wa: #25d366;
  /* Accent: magenta naar paars (variant C3, besluit Dave 17 sep 2026). Geen
     vierde kanaal maar een vrije kleur, en daarom bruikbaar voor de iconen en
     voor het vlak achter beeld. Wit haalt 5,87 op --accent en 7,10 op
     --accent-2, dus over het hele verloop ruim boven de norm. */
  --accent: #c2185b; --accent-2: #6d28d9;
  --verloop-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
  --shadow: 0 1px 2px rgba(16,20,30,.05), 0 12px 34px rgba(16,20,30,.07);
  --shadow-sm: 0 1px 2px rgba(16,20,30,.06);
}

/* ── palet 2 · NEON — wit, magenta ──────────────────────────
   Let op: --brand #e72586 haalt met witte tekst maar 4,19:1.
   --brand-text is de donkerdere variant voor knoppen en links. */
[data-pal="neon"] {
  --bg: #ffffff; --surface: #ffffff; --wash: #fbf5f9;
  --ink: #1a1a1a; --soft: #5f5a5f; --line: #ecdfe8;
  --brand: #d81b76; --brand-d: #c11a6d; --on-brand: #ffffff;
  --brand-vol: #e72586;   /* de originele referentietint, alleen voor vlakken zonder tekst */
  --ink-surf: #1a1a1a; --on-ink: #ffffff; --ink-soft-on: #b3adb1;
  --ch1: #28ab62; --ch2: #e72586; --ch3: #07a4db;
  --shadow: 0 1px 2px rgba(26,10,20,.05), 0 12px 34px rgba(26,10,20,.08);
  --shadow-sm: 0 1px 2px rgba(26,10,20,.06);
}

/* ── palet 3 · NACHT — donker, feestlicht ───────────────────
   --brand #ff2d6f haalt met wit 3,59:1 → alleen grote koppen
   en vlakken. Voor knoptekst gebruikt dit palet donkere tekst. */
[data-pal="nacht"] {
  --bg: #0a0c11; --surface: #12151d; --wash: #171b25;
  --ink: #f1f3f8; --soft: #97a0b2; --line: #242a37;
  --brand: #ff2d6f; --brand-d: #e01055; --on-brand: #14060c;
  --ink-surf: #171b25; --on-ink: #f1f3f8; --ink-soft-on: #97a0b2;
  --ch1: #2ee88a; --ch2: #ff2d6f; --ch3: #22c9ff;
  --shadow: 0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.55);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.04);
}

/* ── kleurintensiteit — tweede dial bovenop het palet ───────
   b1 = wat zit erbij · b2 = dj · b3 = vertrouwen/steden */
:root, [data-int="beheerst"] {
  --b1-bg: var(--ink-surf); --b1-fg: var(--on-ink);   --b1-soft: var(--ink-soft-on);
  --b2-bg: var(--brand);    --b2-fg: var(--on-brand); --b2-soft: color-mix(in srgb, var(--on-brand) 78%, transparent);
  --b3-bg: var(--wash);     --b3-fg: var(--ink);      --b3-soft: var(--soft);
  --hero-veil: 62%;
  --sec5-bg: var(--bg);
}
[data-int="rustig"] {
  --b1-bg: var(--wash); --b1-fg: var(--ink); --b1-soft: var(--soft);
  --b2-bg: var(--bg);   --b2-fg: var(--ink); --b2-soft: var(--soft);
  --b3-bg: var(--wash); --b3-fg: var(--ink); --b3-soft: var(--soft);
  --hero-veil: 48%;
  --sec5-bg: var(--bg);
}
[data-int="vol"] {
  --b1-bg: var(--ink-surf); --b1-fg: var(--on-ink);   --b1-soft: var(--ink-soft-on);
  --b2-bg: var(--brand);    --b2-fg: var(--on-brand); --b2-soft: color-mix(in srgb, var(--on-brand) 78%, transparent);
  /* kanaal-1 groen is licht in alle drie de paletten: tekst erop is bijna-zwart, nooit wit */
  --b3-bg: var(--ch1);      --b3-fg: #0f1216;         --b3-soft: color-mix(in srgb, #0f1216 66%, transparent);
  --hero-veil: 74%;
  --sec5-bg: color-mix(in srgb, var(--ch3) 8%, var(--bg));
}

/* ── basis ─────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-track);
  line-height: var(--lh-tight);
  margin: 0;
}
a { color: inherit; }
img { max-width: 100%; }

.wrap        { max-width: var(--wrap);        margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                            transition-duration: .001ms !important; scroll-behavior: auto !important; }
}