/* ============================================================
   GRIEZELWOUD — DESIGN TOKENS
   De enige plek waar kleuren, type en ritme worden gedefinieerd.
   Wijzig hier, en de hele site verandert mee.
   ============================================================ */

:root {
  /* ---------- KLEUR: de basis van het woud ---------- */
  --void:          #04050A;   /* diep zwart — de nacht zelf */
  --night:         #070B16;   /* nachtblauw — paginabodem */
  --night-2:       #0B1224;   /* nachtblauw, iets lichter */
  --deep:          #101A33;   /* blauw van verre mist */
  --abyss:         #14092A;   /* donker paars, diepste laag */
  --witch:         #2E1152;   /* heksenpaars */
  --witch-2:       #4A1E86;   /* paars, actief */
  --witch-glow:    #8B4DFF;   /* paarse gloed */

  --pumpkin:       #FF7A18;   /* halloween oranje — primair accent */
  --pumpkin-soft:  #FFA14E;
  --ember:         #FF4D00;   /* gloeiend oranje */
  --blood:         #8B0F1D;   /* donker rood */
  --blood-bright:  #C41E2E;   /* rood, actief */

  --gold:          #E8B93B;   /* gouden accent */
  --gold-light:    #F7D97A;
  --gold-dim:      #A8841F;

  --moss:          #3FA372;   /* groen — EHBO / bevestiging */
  --moss-dim:      #1F5540;

  /* ---------- KLEUR: tekst op donker ---------- */
  --bone:          #F1ECE2;   /* primaire tekst */
  --bone-2:        #C9C2B6;   /* secundaire tekst */
  --bone-3:        #948C80;   /* tertiair / meta */
  --bone-4:        #5C574F;   /* uitgeschakeld */

  /* ---------- KLEUR: oppervlakken ---------- */
  --surface:        rgba(255, 255, 255, 0.035);
  --surface-2:      rgba(255, 255, 255, 0.055);
  --surface-3:      rgba(255, 255, 255, 0.085);
  --surface-solid:  #0D1426;
  --surface-solid-2:#131C33;

  --line:           rgba(241, 236, 226, 0.10);
  --line-2:         rgba(241, 236, 226, 0.18);
  --line-gold:      rgba(232, 185, 59, 0.28);
  --line-pumpkin:   rgba(255, 122, 24, 0.32);

  /* ---------- SEMANTISCH ---------- */
  --accent:         var(--pumpkin);
  --accent-ink:     #1A0A00;
  --focus:          var(--gold-light);
  --danger:         var(--blood-bright);
  --success:        var(--moss);

  /* ---------- GLOED & SCHADUW ---------- */
  --glow-pumpkin:  0 0 0 1px rgba(255,122,24,.28), 0 8px 32px -8px rgba(255,122,24,.55), 0 0 64px -16px rgba(255,77,0,.45);
  --glow-gold:     0 0 0 1px rgba(232,185,59,.30), 0 8px 30px -10px rgba(232,185,59,.50);
  --glow-witch:    0 0 0 1px rgba(139,77,255,.28), 0 10px 40px -12px rgba(139,77,255,.55);
  --glow-blood:    0 0 0 1px rgba(196,30,46,.30), 0 8px 30px -10px rgba(196,30,46,.50);

  --shadow-sm:     0 1px 2px rgba(0,0,0,.45);
  --shadow-md:     0 6px 20px -6px rgba(0,0,0,.65);
  --shadow-lg:     0 18px 50px -14px rgba(0,0,0,.80);
  --shadow-xl:     0 34px 90px -20px rgba(0,0,0,.88);

  /* ---------- TYPOGRAFIE ---------- */
  --font-display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-head:    "Cinzel", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Vloeiende typeschaal — schaalt mee van 360px tot 1440px */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --t-base: clamp(0.95rem, 0.91rem + 0.20vw, 1.06rem);
  --t-md:   clamp(1.06rem, 1.00rem + 0.30vw, 1.22rem);
  --t-lg:   clamp(1.24rem, 1.12rem + 0.55vw, 1.55rem);
  --t-xl:   clamp(1.48rem, 1.26rem + 1.00vw, 2.10rem);
  --t-2xl:  clamp(1.82rem, 1.40rem + 1.85vw, 3.00rem);
  --t-3xl:  clamp(2.25rem, 1.50rem + 3.30vw, 4.25rem);
  --t-4xl:  clamp(2.70rem, 1.45rem + 5.60vw, 6.50rem);

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.68;
  --ls-wide:  0.22em;
  --ls-head:  0.01em;

  /* ---------- RITME ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4rem, 3rem + 6vw, 8.5rem);
  --gutter:    clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --maxw:      1280px;
  --maxw-text: 68ch;

  /* ---------- VORM ---------- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;

  /* ---------- BEWEGING ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 620ms;

  /* ---------- LAGEN ---------- */
  --z-mist: 1;
  --z-content: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-sheet: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Lichtthema wordt bewust niet aangeboden: het evenement speelt zich 's avonds af
   en de merkbeleving is onlosmakelijk donker. Wel respecteren we contrastvoorkeuren. */
@media (prefers-contrast: more) {
  :root {
    --bone-2: #E4DED3;
    --bone-3: #BDB6AA;
    --line:   rgba(241, 236, 226, 0.22);
    --line-2: rgba(241, 236, 226, 0.34);
  }
}