/* LocalX — design tokens 
   Onderdeel van de ForwardX Eleventy-structuur. Alle waarden via var(--naam). */

/* ============================================================
   LocalX — Design tokens
   Overgenomen uit de Elementor-kit (elementor-kit-6)
   ============================================================ */

:root {
  /* --- Kleuren --- */
  --accent:        #E87820;  /* primair oranje */
  --accent-h:      #CA5F0A;  /* hover oranje */
  --bg-dark:       #0A0A0A;
  --bg-dark2:      #131313;
  --bg-navy:       #000516;  /* hero, CTA, footer */
  --bg-page:       #FFFFFF;
  --bg-surface:    #F5F4EF;  /* body-achtergrond */
  --bg-soft:       #F9FAFB;
  --bg-warm:       #FEFCFA;  /* Potentie Scan-kaart */
  --bd-warm:       #F5DFCF;  /* Potentie Scan-rand */
  --teal:          #0D9488;  /* ChatGPT/AI-accent */
  --teal-h:        #096058;  /* ChatGPT/AI hover */
  --ai-teal:       #1A988D;  /* label in de ChatGPT-conversatie */
  --ai-green:      #0F9B79;  /* AI-avatar */
  --ai-green-bg:   #EDF1EC;  /* aanbevolen resultaat */
  --ai-green-bd:   #B3D9CC;
  --bg-chip:       #404040;  /* modelpil in de conversatie */
  --bg-bubble:     #F0F0F0;  /* vraagballon */
  --bg-teal:       #F9FCFC;  /* ChatGPT-kaart */
  --text-main:     #0C0C0A;
  --text-sub:      #5A5D6B;
  --text-mute:     #ADADAD;
  --text-light:    #9CA3AF;
  --text-inv:      #F9FAFB;
  --positive:      #08AC1D;  /* groene groeicijfers */
  --map-before:    #FF415C;  /* label "vóór" op de kaartvergelijking */
  --map-after:     #009107;  /* label "ná" op de kaartvergelijking */
  --bg-mint:       #F7FFF7;
  --bg-shade:      #F5F5F5;
  --bg-pos:        rgba(34,197,94,0.15);
  --text-pos:      #16A34A;
  --border:        #E5E4DF;
  --border-hair:   rgba(12,12,10,0.09);  /* dunne scheiding in kaarten/grafieken */

  /* --- Typografie --- */
  --ff-display: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-text:    "Red Hat Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-body:    17px;
  --lh-body:    1.65em;

  /* Typografie-presets uit de kit */
  --fs-h1: 64px;   /* 36px onder 768px */
  --fs-h2: 40px;
  --fs-section-h: 50px;  /* sectiekop-preset */
  --fs-h3: 28px;
  --fs-h4: 19px;
  --fs-h5: 16px;
  --fs-h6: 14px;

  --fs-lead:   18px;  /* primary  — 17px mobiel */
  --ws-lead:   1px;   /* word-spacing uit de primary-preset */

  /* Het origineel sluit veel tekstblokken af met een lege alinea. Op desktop
     telt die 28px plus twee alineamarges van 14,4px; op mobiel vallen die
     marges weg. Die ruimte bepaalt de sectiehoogtes, dus staat ze hier. */
  --empty-p:   56.8px;
  --fs-label:  15px;  /* text     — 13px mobiel, uppercase */
  --fs-eyebrow:12px;  /* accent   — 17px mobiel, uppercase */
  --fs-stat:   50px;
  --fs-fact:   70px;  /* cijfer op de feitenkaarten */
  --fs-card-h: 25px;
  --fs-card-s: 20px;

  /* --- Ruimte --- */
  --container:      1200px;
  --gutter:         30px;
  --section-y:      100px;  /* 40px mobiel */
  --section-x:      0px;    /* 20px mobiel */
  --widget-gap:     30px;

  /* --- Vorm --- */
  --radius-sm:  8px;
  --radius-btn: 9px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
}

@media (max-width: 1024px) {
  :root { --container: 1024px; }
}

@media (max-width: 767px) {
  :root {
    --container:  100%;
    --section-y:  40px;
    --section-x:  20px;
    --fs-h1:      36px;   /* de homepage-hero is 42px, zie sections.css */
    --fs-h2:      28px;
    --fs-section-h: 28px;
    --empty-p:    28px;
    --fs-card-s:  17px;
    --fs-lead:    17px;
    --fs-label:   13px;
    --fs-eyebrow: 17px;
    --fs-stat:    28px;
    --fs-fact:    36px;
    --fs-card-h:  22px;
    --fs-card-s:  17px;
  }
}