/* ============================================================
   MEER DAN WARMTE — design tokens (NEO Agency)
   Versie 1.0 · 03-09-2026
   Lichte basis met donkere ankersecties. Zie BRIEFING.md §5–6.
   Alle contrastwaarden hieronder zijn uitgerekend (WCAG 2.2).
   ============================================================ */

:root {
  /* ---------- Merkkleuren (uit logo, gesampled) ---------- */
  --brand-orange: #EB5328;   /* logo: warmte  — primaire accent */
  --brand-blue:   #408FF7;   /* logo: koeling — alleen in de luchtstroom-graphic */
  --brand-green:  #70B301;   /* intake: secundaire kleur (logo-groen is #7FB135) */
  --brand-grey:   #595959;   /* logo-woordmerk grijs — niet als UI-kleur gebruiken */

  /* ---------- Basis (licht) ---------- */
  --surface:      #FFFFFF;   /* pagina-achtergrond */
  --surface-alt:  #F6F7F9;   /* koele off-white voor afwisselende secties — NOOIT warm/pastel */
  --surface-card: #FFFFFF;
  --line:         #E3E6EB;   /* hairlines, kaartranden */

  /* ---------- Donker anker (hero-variant, review-band, slot-CTA, footer) ---------- */
  --ink:          #0B1A2B;   /* diep navy: tekst op licht én achtergrond van donkere secties */
  --ink-2:        #122A45;   /* iets lichter navy voor kaarten op donker */
  --on-ink:       #FFFFFF;   /* tekst op --ink (17.6:1) */
  --on-ink-muted: #B7C2D0;   /* secundaire tekst op --ink (≥ 9:1) */

  /* ---------- Tekst op licht ---------- */
  --text:         #0B1A2B;   /* 17.6:1 op wit, 16.4:1 op surface-alt */
  --text-muted:   #4A5261;   /* 7.9:1 op wit */
  --text-orange:  #C93E17;   /* oranje als KLEINE tekst op wit: 5.0:1 (logo-oranje #EB5328 haalt maar 3.6:1 → alleen ≥ 24px / ≥ 19px vet) */
  --text-blue:    #1E63C4;   /* blauwe linktekst op wit: 5.8:1 (logo-blauw haalt 3.2:1) */

  /* ---------- Actie (CTA) ---------- */
  --cta-bg:       #EB5328;   /* solid */
  --cta-text:     #0B1A2B;   /* donkere tekst op oranje: 4.85:1 — wit op logo-oranje faalt (3.6:1) */
  --cta-bg-hover: #F26A42;   /* "hover brightens"; tekst blijft --cta-text (≥ 5:1) */
  --cta-bg-active:#E64F25;   /* ink-tekst blijft ≥ 4.5:1 */
  --cta-secondary-border: #0B1A2B; /* outline-variant: 2px ink, tekst ink, hover vult met ink → tekst wit */

  /* ---------- Groen (secundair) ---------- */
  --green-fill:   #70B301;   /* alleen als vlak/graphic met --ink erop (6.8:1); nooit groene tekst op wit (2.6:1) */
  --green-tint:   #E9F3D9;   /* lichte tint voor badges/"subsidie"-labels; tekst --ink (15.3:1) */

  /* ---------- Sterren (reviewbadge) ----------
     Toegevoegd t.o.v. design-tokens.css v1.0: de badge had nog geen eigen
     kleur. Sterren dragen betekenis, dus geldt WCAG 1.4.11 (3:1 voor
     niet-tekstuele content). Het gebruikelijke goud #E8A317 haalt maar
     2.17:1 op wit en valt daarmee af. */
  --star:         #BF7F0A;   /* 3.36:1 op wit · 3.13:1 op --surface-alt */
  --star-on-ink:  #FFC24D;   /* 10.93:1 op --ink */

  /* ---------- Accent op donker ---------- */
  --accent-on-ink:       #EB5328; /* ≥ 24px of grafisch: 4.85:1 */
  --accent-on-ink-small: #F1A78F; /* kleine oranje tekst op --ink: 8.9:1 */
  --green-on-ink:        #9BD65A; /* 10.2:1 */

  /* ---------- Luchtstroom-gradient (signature, alleen grafisch) ---------- */
  --flow-warm: #EB5328;
  --flow-cool: #408FF7;
  --flow-energy: #7FB135;
  --flow-gradient: linear-gradient(90deg, var(--flow-warm) 0%, var(--flow-energy) 50%, var(--flow-cool) 100%);

  /* ---------- Typografie ---------- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;          /* koppen, bold — geometrisch, sluit aan op het ronde logo zonder het na te doen */
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* body (NEO-norm: system sans) */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* eyebrows, cijfers */
  --font-accent:  "Instrument Serif", Georgia, serif;                   /* accentregel italic (NEO tekst-hiërarchie) */

  /* schaal — ondergrens = wat op 375px past (max 2 regels per kop) */
  --fs-eyebrow: 0.8125rem;                              /* 13px, uppercase, mono, letter-spacing .08em */
  --fs-body:    1rem;                                   /* 16px — nooit lager; inputs ook ≥ 16px */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h1:      clamp(2.125rem, 1.5rem + 3vw, 4rem);   /* 34px op 375 → 64px op 1440 */
  --lh-body:    1.55;
  --lh-heading: 1.08;

  /* ---------- Ruimte (8px-grid) ---------- */
  --s-1: 0.5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;  --s-7: 6rem;    --s-8: 8rem;
  --gutter:       clamp(1.25rem, 4vw, 2rem);            /* 20px mobiel → 32px desktop */
  --section-gap:  clamp(5rem, 8vw, 8rem);               /* ≥ 80px altijd */
  --container:    75rem;                                /* 1200px */
  --card-pad:     var(--s-3);
  --card-gap:     var(--s-4);                           /* > card-pad (NEO mobiel §2) */

  /* ---------- Vorm ---------- */
  --radius-card:  12px;  /* klantwens 04-09-2026: ronder, sluit aan op het ronde logo (wijkt af van NEO DEEL 2) */
  --radius-cta:   10px;  /* klantwens 04-09-2026: ronder (NEO-norm was 0) */
  --radius-pill:  999px; /* uitsluitend voor de review-badge en de luchtstroom-elementen */

  /* ---------- Motion (GSAP/ScrollTrigger/Lenis) ---------- */
  --t-fast: 200ms;
  --t-base: 300ms;
  --t-slow: 500ms;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Bediening ---------- */
  --tap-min: 44px;   /* NEO-norm; primaire CTA mag 48px */
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px #1E63C4; /* zichtbaar op licht én donker */
}

/* Donkere sectie: zet de variabelen om, componenten blijven gelijk */
.section--ink {
  --surface:      var(--ink);
  --surface-alt:  var(--ink-2);
  --surface-card: var(--ink-2);
  --line:         #22364F;
  --text:         var(--on-ink);
  --text-muted:   var(--on-ink-muted);
  --text-orange:  var(--accent-on-ink-small);
  --cta-bg:       #EB5328;
  --cta-text:     #0B1A2B;
  --cta-secondary-border: #FFFFFF;
  background: var(--surface);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}