/* ==========================================================================
   RijQuality — design tokens (NEO Agency)
   v1.1, 31-08-2026 — herzien palet: geel verwijderd, alles om het logo heen.

   Uitgangspunt is het logo: witte wordmark op merkblauw. Daar volgt het hele
   systeem uit. Twee accenten — blauw en wit — op een donkere basis. Dat is de
   strikte lezing van de NEO-norm "beperkte accentkleuren (2–3 maximum)".
   Diepte komt uit drie blauwwaarden en uit figuur/grond, niet uit een derde
   kleurtoon. Alle contrastwaarden zijn berekend (WCAG 2.1).

   Wijziging t.o.v. v1.0: --q-signal (#FFD23F, signaalgeel) is vervallen.
   Dat geel kwam in geen enkel merkmateriaal van Quality voor. De primaire CTA
   is nu een wit vlak met donkere tekst: 18,99:1 — hoger dan het geel haalde
   (13,15:1) én in de huisstijl. De "streep" is wit, wat bovendien klopt:
   Nederlandse wegmarkering is wit.
   ========================================================================== */

:root {
  /* ---- Kleur: donkere basis ---------------------------------------------
     Afgeleid van #001722, de achtergrond van hun eigen headerlogo. Navy uit
     het merkblauw, geen puur zwart.                                        */
  --q-ink:        #07111C;  /* pagina-achtergrond; wit op ink 18,99:1 */
  --q-ink-2:      #101B28;  /* kaarten, verhoogde secties; wit 17,36:1 */
  --q-ink-3:      #182536;  /* borders, dividers, hover-vlakken */

  /* ---- Kleur: het merk --------------------------------------------------
     #0085CB is de opgegeven huisstijlkleur en komt vrijwel exact overeen met
     het logolockup uit 2021 (#0084CE). Het logobestand in docs/ is #3982C5
     en het oude sitethema #3E8BCD — die twee laten we vallen.              */
  --q-blue:        #0085CB; /* merkblauw: vlakken, iconen, focus, chips.
                               Op ink 4,72:1 → tekst ≥18px bold of ≥24px.
                               Wit op dit blauw = 4,03:1 → nooit bodytekst. */
  --q-blue-bright: #4DB3F5; /* kleine tekst op donker: eyebrows, links, cijfers.
                               Op ink 8,21:1 · op ink-2 7,51:1 */
  --q-blue-deep:   #0A6FA8; /* blauw vlak mét witte bodytekst; wit 5,45:1.
                               Ook de sterren in de lichte sectie: 5,45:1 op wit */

  /* ---- Kleur: wit als tweede accent -------------------------------------
     Wit is in dit merk geen "tekstkleur" maar een dragende kleur: het logo
     is wit, de wegmarkering is wit, de primaire knop is wit.               */
  --q-white:      #FFFFFF;
  --q-action:     var(--q-white); /* primaire CTA-vlak; ink erop = 18,99:1 */
  --q-mist:       #B8C4D0;        /* secundaire tekst op donker; 10,71:1 */
  --q-paper:      #F4F7FA;        /* lichte sectie (max 1–2 per pagina) */
  --q-paper-text: #3A4653;        /* bodytekst in de lichte sectie; 8,96:1 op paper */
  --q-paper-line: #DFE6ED;        /* borders in de lichte sectie */
  --q-placeholder:#7A8996;        /* invoervelden; 5,29:1 op ink */

  /* ---- Functionele kleuren (geen merkaccenten) --------------------------
     Alleen voor formulierstaten. Nooit decoratief inzetten.               */
  --q-error:      #FF8A80;  /* op ink 8,32:1 · op ink-2 7,61:1 */
  --q-focus:      var(--q-blue); /* op ink 4,72:1 · op paper 3,74:1 */

  /* ---- Gloed (alleen hero + slot-CTA) ---------------------------------- */
  --q-glow: radial-gradient(60% 50% at 50% 0%, rgba(0,133,203,.18) 0%, rgba(0,133,203,0) 70%);

  /* ---- Typografie ------------------------------------------------------ */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;     /* H1–H3, stats; 700/800 */
  --font-accent:  "Instrument Serif", Georgia, serif;                  /* italic accentregel */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* eyebrows, bronregels */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;

  /* modulaire schaal 1.25, verankerd op 16px, afgerond op 8px-grid waar het kan */
  --fs-eyebrow: 0.8125rem;                        /* 13px */
  --fs-body:    1rem;                             /* 16px */
  --fs-body-lg: 1.125rem;                         /* 18px */
  --fs-h4:      1.25rem;                          /* 20px */
  --fs-h3:      clamp(1.5rem, 2.2vw, 1.75rem);    /* 24–28px */
  --fs-h2:      clamp(1.75rem, 4.5vw, 3.5rem);    /* 28–56px */
  --fs-h1:      clamp(1.875rem, 7vw, 4.5rem);     /* 30–72px */
  --fs-stat:    clamp(3.25rem, 6.5vw, 5.5rem);    /* 52–88px */

  --lh-tight: 0.98;
  --lh-snug:  1.15;
  --lh-body:  1.6;
  --ls-display: -0.02em;
  --ls-eyebrow: 0.12em;

  /* ---- Spacing (8px-grid) --------------------------------------------- */
  --s-1: 0.5rem;   /* 8  */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --s-8: 8rem;     /* 128 */

  --section-y: 5rem;               /* 80px mobiel — secties moeten op een
                                      klein scherm duidelijk uit elkaar vallen */
  --container: 80rem;              /* 1280px */
  --gutter: var(--s-3);            /* 24px */
  --grid-gap: var(--s-2);          /* 16px; desktop 24px */

  /* ---- Vorm ----------------------------------------------------------- */
  --radius: 0;                     /* NEO-norm: geen afgeronde hoeken */
  --radius-round: 999px;           /* alleen avatars + WhatsApp-icoon */
  --border: 1px solid var(--q-ink-3);
  --touch-min: 3rem;               /* 48px */

  /* ---- Motion (GSAP-waarden in ms; CSS gebruikt de s-varianten) -------- */
  --t-fast: 200ms;
  --t-base: 300ms;
  --t-slow: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* power3.out */
  --ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1); /* back.out(1.4) — kleine elementen */

  /* ---- Signature: "de streep" (wegmarkering) ---------------------------
     Wit, zoals Nederlandse wegmarkering. Het logo heeft dezelfde snede.   */
  --stripe-color: var(--q-white);
  --stripe-dash: 48;   /* px, gebruik in SVG stroke-dasharray */
  --stripe-gap: 24;
  --stripe-width: 3px;

  /* ---- Z-index -------------------------------------------------------- */
  --z-header: 50;
  --z-sticky-bar: 60;
  --z-menu: 70;
}

@media (min-width: 64rem) {
  :root {
    --section-y: var(--s-7);   /* 96px desktop */
    --grid-gap: var(--s-3);    /* 24px */
  }
}

/* ---- Basis ------------------------------------------------------------- */
html { color-scheme: dark; background: var(--q-ink); }
body {
  margin: 0;
  background: var(--q-ink);
  color: var(--q-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
body p, .text-secondary { color: var(--q-mist); }

/* ---- Tekst-hiërarchie (Deel 2: eyebrow / H / accent / body) ------------ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--q-blue-bright);
}
h1, .h1 { font: 800 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); margin: 0; }
h2, .h2 { font: 700 var(--fs-h2)/var(--lh-snug) var(--font-display);  letter-spacing: var(--ls-display); margin: 0; }
h3, .h3 { font: 700 var(--fs-h3)/var(--lh-snug) var(--font-display);  margin: 0; }
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--q-blue-bright); }
.stat { font: 800 var(--fs-stat)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.source { font-family: var(--font-mono); font-size: 0.75rem; color: var(--q-mist); } /* bron + periode onder cijfers */

/* ---- Knoppen (solid, radius 0, hover brightens, focus zichtbaar) -------
   Primair = wit vlak, donkere tekst (18,99:1). Dit lost het intake-punt
   "CTA's niet in contrastkleur" op met de hoogste waarde die er is.       */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: var(--touch-min); padding: 0 var(--s-3);
  font: 700 var(--fs-body)/1 var(--font-display);
  border: 0; border-radius: var(--radius); cursor: pointer; text-decoration: none;
  transition: filter var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { filter: brightness(0.95); transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--q-focus); outline-offset: 3px; }
.btn--primary { background: var(--q-action); color: var(--q-ink); }        /* 18,99:1 */
.btn--primary:hover { filter: none; background: var(--q-blue-bright); }    /* wit → merkblauw bij hover */
.btn--blue    { background: var(--q-blue-deep); color: var(--q-white); }   /* 5,45:1 */
.btn--ghost   { background: transparent; color: var(--q-white); box-shadow: inset 0 0 0 1px var(--q-mist); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--q-white); }

/* ---- Kaarten ----------------------------------------------------------- */
.card {
  background: var(--q-ink-2); border: var(--border); border-radius: var(--radius);
  padding: var(--s-4);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.card:hover { transform: scale(1.02); border-color: var(--q-blue); }
.card--featured { background: var(--q-blue-deep); border-color: var(--q-blue); }
.card--featured p { color: var(--q-white); }

/* ---- Lichte sectie (max 1–2 per pagina, koel, nooit pastel) ------------- */
.section--light { background: var(--q-paper); color: var(--q-ink); }
.section--light p { color: var(--q-paper-text); }
.section--light .eyebrow { color: var(--q-blue-deep); }

/* ---- Signature: de streep ---------------------------------------------- */
.stripe { display: block; width: 100%; height: var(--stripe-width); overflow: visible; }
.stripe path {
  stroke: var(--stripe-color); stroke-width: var(--stripe-width);
  stroke-dasharray: var(--stripe-dash) var(--stripe-gap);
  fill: none;
  /* stroke-dashoffset wordt door GSAP/ScrollTrigger geanimeerd ("tekent zich") */
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .marquee { animation: none; }
}