/* Ontwerptokens — de enige plek met losse waarden. Zie DESIGN.md voor de regels. */
:root {
  /* Kleur — huisstijl "Casual Luxury": oranje vlak, zwart woordmerk */
  --oranje: #e04b00; /* het merkvlak: hero, merken, nieuwsbrief */
  --oranje-diep: #b83c00; /* hover op oranje; oranje tekst op licht (contrast 5:1) */
  --oranje-licht: #f2835a; /* kern van de spotlight in de hero, nooit voor tekst */
  --kalk: #f4efe8; /* hoofdachtergrond, gebroken wit */
  --linnen: #e9e1d5; /* tweede vlak, secties die moeten afwijken */
  --inkt: #15110e; /* warm zwart: woordmerk, tekst, footer */
  --steen: #655d55; /* secundaire tekst, labels */
  --wit: #fff;
  --zwart: #000;

  /* Hulpwaarden voor rgba() */
  --oranje-rgb: 224, 75, 0;
  --inkt-rgb: 21, 17, 14;
  --kalk-rgb: 244, 239, 232;

  /* Afgeleide kleuren, altijd opgebouwd uit het palet */
  --lijn: color-mix(in srgb, var(--inkt) 14%, transparent);
  --lijn-sterk: color-mix(in srgb, var(--inkt) 32%, transparent);
  --lijn-op-oranje: color-mix(in srgb, var(--inkt) 28%, transparent);
  --lijn-op-inkt: color-mix(in srgb, var(--kalk) 18%, transparent);
  --beeld-vlak: color-mix(in srgb, var(--linnen) 70%, var(--kalk));
  --kalk-op-inkt: color-mix(in srgb, var(--kalk) 72%, var(--inkt));
  --scrim: color-mix(in srgb, var(--inkt) 38%, transparent);

  /* Filmkorrel op de oranje vlakken: zwarte ruis met lage, wisselende dekking.
     De sterkte zit in de laatste rij van feColorMatrix (.3 en -.09). */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 -.09'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");

  /* Betekenis: enkel voor het label open/gesloten en het formulier */
  --succes: var(--oranje);
  --fout: var(--oranje-diep);
  --rust: var(--steen);

  /* Typografie */
  --font-display: 'Michroma', 'Arial Black', sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;

  --fs-label: 0.6875rem; /* Michroma in kapitalen: labels, navigatie, knoppen */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-statement: clamp(1.75rem, 1.1rem + 2.8vw, 3.75rem);
  --fs-h2: clamp(1.625rem, 0.9rem + 3.6vw, 4.25rem);
  --fs-band: clamp(2.5rem, 1.2rem + 6vw, 7rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --tracking-label: 0.14em;
  --tracking-display: 0.01em;

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

  --sectie-y: clamp(var(--space-8), 9vw, 9rem);
  --gutter: clamp(var(--space-4), 4vw, var(--space-7));

  /* Vorm */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pil: 999px;

  --maxw: 84rem;
  --maxw-smal: 44rem;
  --measure: 62ch;

  --header-h: 4.5rem;

  /* Schaduw: enkel voor wat echt boven de pagina zweeft */
  --schaduw-zwevend: 0 1.5rem 3rem -1.5rem rgba(var(--inkt-rgb), 0.45);

  /* Hero: het logo, en het videovenster dat bij het scrollen openschuift tot het
     hele scherm. --v-…: de afstand van het venster tot de rand in rust (bij --p: 0).
     --hero-reis: hoe lang de hero blijft staan terwijl het venster opengaat. */
  --hero-logo-w: clamp(17rem, 58vw, 50rem);
  --v-top: 63%;
  --v-onder: 11%;
  --v-zij: 37%;
  --hero-reis: 220svh;
  --hero-spot: 38vmax; /* straal van de spotlight die de muis volgt */

  /* Galerij: aantal kolommen in het raster en de ruimte ertussen */
  --kolommen: 4;
  --galerij-gap: var(--space-4);

  /* Merken: breedte van één merk in de band, ruimte ertussen, hoogte van het logovak,
     en hoe lang één merk erover doet om voorbij te schuiven */
  --merk-w: 10rem;
  --merk-gap: var(--space-7);
  --merk-logo-h: 3.25rem;
  --merk-tempo: 3200ms;

  /* Band met grote tekst onder de hero: basissnelheid in px per seconde */
  --band-tempo: 60;

  /* Beweging */
  --duur-snel: 180ms;
  --duur-reveal: 600ms;
  --duur-beeld: 900ms; /* foto's die inzoomen bij hover */
  --duur-tekst: 1300ms; /* tekstblokken die opkomen, lijnen die zich trekken */
  --duur-kop: 1000ms; /* letters van een titel die opkomen */
  --duur-magneet: 450ms;
  --stap: 60ms; /* vertraging tussen opeenvolgende woorden of kaarten */
  --stap-letter: 28ms; /* tussen twee letters van een titel */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-uit: cubic-bezier(0.16, 1, 0.3, 1); /* snel vertrekken, zacht landen */
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* zacht vertrekken, snel weg (sluiten) */
  --ease-lijn: cubic-bezier(0.7, 0, 0.2, 1);
  --duur-menu: 650ms; /* mobiel menu opent */
  --duur-menu-dicht: 420ms; /* en sluit vlotter */

  /* Intro van het hero-logo, één keer bij het laden (± 2 s): de letters van de naam
     komen één voor één van onder op, de slogan loopt open vanuit het midden, het
     videovenster komt omhoog en de hoeken faden in. */
  --t-letter-start: 200ms;
  --t-letter: 1100ms;
  --t-letter-stap: 70ms;
  --t-slogan-start: 850ms;
  --t-slogan: 1400ms;
  --t-venster-start: 1100ms;
  --t-venster: 1200ms;
  --t-hoek-start: 1500ms;
  --t-hoek: 800ms;
}

/* Tablet: drie kolommen foto's */
@media (min-width: 48em) and (max-width: 63.99em) {
  :root {
    --kolommen: 3;
  }
}

/* Telefoon: twee kolommen foto's, smallere merkvakken, een breder videovenster */
@media (max-width: 47.99em) {
  :root {
    --kolommen: 2;
    --galerij-gap: var(--space-3);
    --merk-w: 7.5rem;
    --merk-gap: var(--space-6);
    --hero-logo-w: min(84vw, 26rem);
    --v-top: 60%;
    --v-onder: 13%;
    --v-zij: 16%;
    --hero-reis: 200svh;
  }
}