/* ==========================================================================
   Yellowgrape Commerce Day — tokens.css
   De enige plek waar visuele waarden worden gedefinieerd.

   HARDE REGEL: in components.css en in de HTML staat GEEN enkele kale waarde
   voor kleur, spacing, radius, fontgrootte of duration. Alles verwijst naar
   een token hieronder. Wil je het design tweaken, dan tweak je dit bestand.

   Kleur, fontfamilies, gutter, radius, borders en easing komen exact uit het
   Yellowgrape Brandbook (design.md / docs 08-design-tokens.md). Verzin hier
   nooit een nieuwe kleur of tussentint bij.

   Documentatie: docs/02-design-system.md
   ========================================================================== */

:root {
  /* ======================================================================
     1. KLEUR — brandbook, exact overgenomen
     ====================================================================== */
  --yellow: #fff904;        /* primaire merkkleur, accenten, CTA op donker    */
  --yellow-soft: #ffea99;   /* zachte gele tint, subtiel accentvlak           */
  --black: #000000;         /* buttons, donkere secties, merk- en UI-vlakken  */
  --white: #ffffff;         /* algemene achtergrond, tekst op donker          */

  --surface: #fafafa;       /* lichtgrijs sectie-oppervlak                    */
  --surface-alt: #f3f3f3;   /* alternatief licht oppervlak                    */

  --ink: #000000;           /* bodytekst                                      */
  --ink-600: #333333;       /* secundaire tekst                               */
  --ink-400: #6b6b6b;       /* tertiaire tekst, captions, metadata            */
  --border: #e2e2e2;        /* hairline-borders, scheidingslijnen             */

  /* Tekst en lijnen op een donkere ondergrond. Afgeleiden van --white met
     alpha; geen nieuwe kleuren, alleen transparantie. */
  --ink-on-dark: rgba(255, 255, 255, 1);
  --ink-on-dark-600: rgba(255, 255, 255, 0.74);
  --ink-on-dark-400: rgba(255, 255, 255, 0.56);
  --border-on-dark: rgba(255, 255, 255, 0.18);
  --surface-on-dark: rgba(255, 255, 255, 0.06);

  /* Signature AI-gradient uit het brandbook. Spaarzaam: maximaal twee keer
     per pagina (hier: de eyebrow-streep van de intro en het woord AI-driven
     in de footer). De anim-variant loopt naadloos rond (begint en eindigt op
     dezelfde kleur) voor de doorlopende beweging uit het brandbook. */
  --grad-ai: linear-gradient(90deg, #ffe600 0%, #ffb400 25%, #ff6478 60%, #ff00b4 100%);
  --grad-ai-anim: linear-gradient(90deg, #ffe600 0%, #ffb400 30%, #ff6478 65%, #ffb400 85%, #ffe600 100%);

  /* Hero-overlay in drie lagen: donkere gradient links -> rechts (signatuur),
     een bodem-verloop voor de countdown en een top-verloop voor de navigatie.
     De basislaag verdonkert alles licht zodat ook heldere videobeelden
     leesbare tekst opleveren; op mobiel (alles is tekstbreedte) iets sterker. */
  --grad-hero-x: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.16) 100%);
  --grad-hero-y: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 44%);
  --grad-hero-top: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%);
  --hero-scrim: rgba(0, 0, 0, 0.30);

  /* ======================================================================
     2. TYPOGRAFIE
     ====================================================================== */
  --font-display: 'Poppins', Arial, Helvetica, sans-serif;  /* koppen, UI, buttons */
  --font-body: 'Inter', Arial, Helvetica, sans-serif;       /* bodytekst           */

  /* Schaal. De clamp-waarden schalen mobiel -> desktop; de vaste waarden
     veranderen bewust niet mee (labels en small blijven altijd leesbaar). */
  --t-display: clamp(2.4rem, 8vw, 5.6rem);      /*  38 -> 90 px  hero h1       */
  --t-h1: clamp(2rem, 5.2vw, 3.25rem);          /*  32 -> 52 px  paginakop     */
  --t-h2: clamp(1.75rem, 4vw, 2.75rem);         /*  28 -> 44 px  sectiekop     */
  --t-h3: clamp(1.375rem, 2.2vw, 1.75rem);      /*  22 -> 28 px  cardtitel     */
  --t-h4: 1.25rem;                              /*  20 px        subkop        */
  --t-lead: clamp(1.125rem, 1.6vw, 1.375rem);   /*  18 -> 22 px  lead/intro    */
  --t-body: clamp(1rem, 1.05vw, 1.125rem);      /*  16 -> 18 px  bodytekst     */
  --t-sm: 0.9375rem;                            /*  15 px        secundair     */
  --t-label: 0.875rem;                          /*  14 px        overline      */
  --t-xs: 0.75rem;                              /*  12 px        meta, legal   */

  --w-display: 600;   /* Poppins semibold — alleen hero en h1 */
  --w-heading: 500;   /* Poppins medium — h2, h3, h4, UI, buttons */
  --w-body: 300;      /* Inter light — standaard bodytekst */
  --w-body-em: 400;   /* Inter regular — nadruk en kleine tekst */

  --lh-display: 1.04;
  --lh-heading: 1.16;
  --lh-lead: 1.55;
  --lh-body: 1.78;
  --lh-tight: 1.3;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-label: 0.14em;   /* = 2px bij 14px, conform brandbook */

  /* ======================================================================
     3. SPACING — 4px-basis, brandbook-ritme (20/40/60/80/100/140) op
        sectieniveau. Er bestaat NIETS tussen deze stappen in.
     ====================================================================== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-15: 60px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-25: 100px;
  --sp-35: 140px;

  /* --- Semantische spacing: gebruik ALTIJD deze, niet de kale --sp-*. ---
     De waarden hieronder zijn de mobiele start; ze stappen op in de media
     queries onderaan dit bestand. Zo hoef je in components.css nooit een
     breakpoint te herhalen. */

  --section-y: var(--sp-20);          /* verticale sectie-padding  80 -> 100 -> 140 */
  --section-head-gap: var(--sp-8);    /* sectiekop -> content      32 -> 48  -> 64  */
  --block-gap: var(--sp-12);          /* blok -> blok in sectie    48 -> 64         */
  --card-pad: var(--sp-6);            /* padding binnen een card   24 -> 32  -> 40  */
  --gap-card: var(--sp-5);            /* card -> card in een grid  20 -> 24  -> 32  */

  /* Micro-ritmes. Deze veranderen NIET per breakpoint, op één na
     (--gap-title-text), omdat een grotere kop op desktop meer lucht vraagt. */
  --gap-label-title: var(--sp-3);     /* eyebrow -> kop            12 */
  --gap-title-text: var(--sp-4);      /* kop -> subtekst           16 -> 20 */
  --gap-text-cta: var(--sp-8);        /* subtekst -> button        32 */
  --gap-para: var(--sp-4);            /* alinea -> alinea          16 */
  --gap-inline: var(--sp-2);          /* icoon -> label            8  */
  --gap-field: var(--sp-5);           /* formulierveld -> veld     20 */
  --gap-row: var(--sp-6);             /* lijstitem-padding         24 */

  /* ======================================================================
     4. LAYOUT
     ====================================================================== */
  --gutter: clamp(1.5rem, 6vw, 6rem);   /* 24 -> 96 px, brandbook-token       */
  --wrap-max: 78rem;                    /* 1248 px contentbreedte             */
  --measure: 62ch;                      /* max regellengte bodytekst          */
  --measure-narrow: 46ch;               /* max regellengte in smalle kolommen */
  --nav-h: 64px;                        /* hoogte van de topbalk              */

  /* ======================================================================
     5. VORM — brandbook: rechte blokken, ronde interactie
     ====================================================================== */
  --r-block: 0;         /* cards, contentblokken, inputs        */
  --r-media: 0;         /* foto's en video: net zo strak als blokken (keuze Jonathan 2026-08-11) */
  --r-pill: 100px;      /* buttons, pills, badges               */
  --r-circle: 50%;      /* avatars, ronde accenten              */

  --bw-hairline: 1px;   /* cards, tegels, tabellen              */
  --bw-button: 2px;     /* buttons en varianten                 */
  --bw-rule: 2px;       /* eyebrow-streepje                     */

  /* Het merk is vlak: geen elevatieschaal. Deze ene schaduw is uitsluitend
     voor elementen die echt boven de pagina zweven (sticky CTA, toast). */
  --shadow-float: 0 10px 34px rgba(0, 0, 0, 0.28);

  /* ======================================================================
     6. MOTION
     ====================================================================== */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 0.2s;     /* opacity, kleine hover        */
  --d-hover: 0.25s;   /* cards en tegels              */
  --d-ui: 0.3s;       /* buttons, navigatie, accordion */
  --d-reveal: 0.7s;   /* scroll-reveal van secties    */

  /* ======================================================================
     7. Z-INDEX — vier lagen, meer zijn er niet
     ====================================================================== */
  --z-base: 1;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-loader: 400;   /* preloader, boven alles */
}

/* ==========================================================================
   BREAKPOINTS — mobile first. Vier stappen, meer zijn er niet.
     sm  560px   twee kolommen mogelijk
     md  768px   tablet: ruimere secties en cards
     lg  1000px  desktop: volledige grids, hero naast elkaar
     xl  1280px  groot scherm: maximale sectie-ademruimte

   Mapping naar de desktop-first queries in het brandbook:
     max-width 540/560 -> min-width 560   |  max-width 760 -> min-width 768
     max-width 880     -> min-width 1000  |  max-width 1000 -> min-width 1000
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --section-y: var(--sp-25);
    --section-head-gap: var(--sp-12);
    --card-pad: var(--sp-8);
    --gap-card: var(--sp-6);
    --gap-title-text: var(--sp-5);
    /* Op breder scherm draagt de links->rechts-gradient het contrast en mag
       de egale verdonkering terug. */
    --hero-scrim: rgba(0, 0, 0, 0.16);
  }
}

@media (min-width: 1000px) {
  :root {
    --section-head-gap: var(--sp-16);
    --block-gap: var(--sp-16);
    --card-pad: var(--sp-10);
    --gap-card: var(--sp-8);
  }
}

@media (min-width: 1280px) {
  :root {
    --section-y: var(--sp-35);
  }
}

/* Toegankelijkheid: wie beweging uitzet, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0.01ms;
    --d-hover: 0.01ms;
    --d-ui: 0.01ms;
    --d-reveal: 0.01ms;
  }
}