/* ==========================================================================
   Work and Joy — design tokens (NEO opzet, nov 2026)
   Basis: bestaande huisstijl (oranje #F15B29, cyaan #00E8FC, navy #111827,
   marker-logo). Geüpgraded: typografie, schaal, motion, sticker-systeem.
   ========================================================================== */

/* Fonts (Google Fonts, gratis):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Schibsted+Grotesk:ital,wght@0,400..800;1,400..600&display=swap" rel="stylesheet">
*/

:root {
  /* ---------- Kleur: merk ---------- */
  --wj-orange:        #F15B29;  /* hoofdkleur, uit logo en huidige site */
  --wj-orange-deep:   #D9461A;  /* hover/pressed op oranje vlakken */
  --wj-orange-soft:   #FFE3D6;  /* lichte tint voor achtergronden/tags */
  --wj-cyan:          #00E8FC;  /* accent — ALLEEN als vlak met navy tekst, nooit als tekstkleur */
  --wj-cyan-deep:     #00C4D6;
  --wj-navy:          #111827;  /* tekst, donkere secties, sticker-outlines */
  --wj-navy-2:        #1C2433;  /* kaarten op navy */

  /* ---------- Kleur: neutraal ---------- */
  --wj-paper:         #FBF8F3;  /* warme off-white i.p.v. koel #F9FAFB — voelt minder "template" */
  --wj-white:         #FFFFFF;
  --wj-ink-70:        #3D4452;  /* bodytekst op paper */
  --wj-ink-50:        #6B7280;  /* meta, captions (min. 16px op paper i.v.m. contrast) */
  --wj-line:          #E7E1D8;

  /* Contrastregels (WCAG 2.1 AA):
     navy op oranje  ≈ 5.3:1  → OK voor alle tekst
     wit op oranje   ≈ 3.3:1  → ALLEEN ≥24px, of ≥19px bold
     navy op cyaan   ≈ 11.8:1 → OK
     wit op cyaan    ≈ 1.5:1  → NOOIT
  */

  /* ---------- Typografie ---------- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --font-body:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Vloeiende schaal (mobiel 375 → desktop 1440) */
  --fs-mega:   clamp(4rem, 3rem + 11vw, 15rem);    /* hero-woorden, footer-wordmark */
  --fs-h1:     clamp(2.75rem, 1.9rem + 4.4vw, 6.5rem);
  --fs-h2:     clamp(2.25rem, 1.7rem + 2.8vw, 4.5rem);
  --fs-h3:     clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-h4:     clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --fs-lead:   clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --fs-body:   1.0625rem;  /* 17px */
  --fs-small:  0.9375rem;  /* 15px — nooit kleiner voor lopende tekst */
  --fs-eyebrow: 0.875rem;  /* 14px, uppercase, tracking .08em */

  --lh-tight:  0.92;   /* mega/h1 */
  --lh-head:   1.05;
  --lh-body:   1.6;

  /* Bricolage variabele assen */
  --display-wght: 800;
  --display-wdth: 100;   /* 75 = condensed (marquees, cijfers) */

  /* ---------- Spacing (8px-grid) ---------- */
  --sp-1: 0.5rem;   /*  8 */
  --sp-2: 1rem;     /* 16 */
  --sp-3: 1.5rem;   /* 24 */
  --sp-4: 2rem;     /* 32 */
  --sp-5: 3rem;     /* 48 */
  --sp-6: 4rem;     /* 64 */
  --sp-7: 6rem;     /* 96 */
  --sp-8: 8rem;     /* 128 */
  --section-y: clamp(5rem, 3.5rem + 7vw, 10rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);   /* mobiel 16px */
  --container: 1320px;

  /* ---------- Radius ---------- */
  --r-sm: 8px;
  --r-md: 16px;      /* NEO-standaard voor kaarten */
  --r-lg: 28px;      /* grote foto-panelen */
  --r-pill: 999px;

  /* ---------- Schaduwen ---------- */
  --shadow-soft:    0 2px 12px rgba(17, 24, 39, .08);   /* NEO-standaard: kaarten */
  --shadow-lift:    0 12px 32px rgba(17, 24, 39, .14);  /* kaart-hover */
  /* AFWIJKING NEO: sticker-systeem met harde offset-schaduw */
  --sticker-border: 2px solid var(--wj-navy);
  --shadow-sticker: 4px 4px 0 var(--wj-navy);
  --shadow-sticker-hover: 7px 7px 0 var(--wj-navy);

  /* ---------- Rotaties (vaste set, nooit willekeurig) ---------- */
  --tilt-1: -6deg;
  --tilt-2: -3deg;
  --tilt-3: 2deg;
  --tilt-4: 5deg;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* expo-out: reveals */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* overshoot: stickers, buttons */
  --dur-micro: 220ms;   /* hover/focus (NEO: 200–300ms) */
  --dur-ui:    420ms;
  --dur-reveal: 900ms;

  /* ---------- Z-lagen ---------- */
  --z-nav: 50;
  --z-cursor: 60;
  --z-overlay: 70;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-ui: 0ms;
    --dur-reveal: 0ms;
  }
}

/* ---------- Basis ---------- */
html { background: var(--wj-paper); color: var(--wj-navy); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth), "opsz" 96;
  line-height: var(--lh-head);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- Sticker-basis ---------- */
.sticker {
  border: var(--sticker-border);
  box-shadow: var(--shadow-sticker);
  border-radius: var(--r-md);
  transition: transform var(--dur-micro) var(--ease-spring),
              box-shadow var(--dur-micro) var(--ease-out);
}
.sticker:hover {
  transform: translate(-3px, -3px) rotate(var(--_tilt, 0deg));
  box-shadow: var(--shadow-sticker-hover);
}