/* ============================================================
   JUNCTION TECH — DESIGN TOKENS
   Eén bron van waarheid. Deze waarden zijn 1-op-1 de
   Elementor Global Kit (kleuren, typografie, spacing).
   Zie site/STYLEGUIDE.md voor de toelichting per token.
   ============================================================ */

:root {
  /* ---- Kleur: merk ---------------------------------------- */
  --navy:  #003366;   /* primair: koppen, donkere secties, footer */
  --cyan:  #00A6D6;   /* accent: links, lijnen, CTA's — nooit lopende tekst */
  --line:  #E6EDF3;   /* randen, scheidingslijnen */
  --grey:  #6B7280;   /* secundair (iconen, decoratief) */
  --mist:  #F5F7FA;   /* afwisselende sectie-achtergrond */
  --white: #FFFFFF;

  /* ---- Kleur: afgeleide tinten ---------------------------- */
  --ink:     #0E2036; /* donkerste tekst, footer */
  --navy-2:  #00284D; /* verlopen, hero-onderkant */
  --text-2:  #5B6779; /* secundaire tekst: --grey verdonkerd tot 4.5:1 op --mist */
  --cyan-deep: #0076A0; /* cyan als tékst op licht (eyebrows, links): 5.2:1 op wit */
  --cyan-on-dark: #2FB8E0; /* cyan als kleine tekst op navy: 5.4:1 */
  --cyan-light: #7FD4EE; /* lichte cyan op donker: lijnen, subtitels */
  --on-cyan: #012A3A; /* tekst op een cyan vlak (knoppen) */

  /* Tekst op donkere vlakken */
  --text-on-dark:   #FFFFFF;
  --text-on-dark-2: #A9C2D6;
  --line-on-dark:   rgba(255,255,255,.14);

  /* ---- Typografie ----------------------------------------- */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Schaal: 17px basis, ratio ≈ 1.2; display-maten schalen met de viewport */
  --fs-xs:   .78rem;  /* 13px  eyebrow, meta */
  --fs-sm:   .88rem;  /* 15px  bijschrift, footer */
  --fs-base: 1rem;    /* 17px  lopende tekst */
  --fs-md:   1.18rem; /* 20px  lead, kaartkop */
  --fs-lg:   1.41rem; /* 24px  h3 */
  --fs-xl:   clamp(1.6rem, 1.2rem + 1.6vw, 1.94rem);   /* 27–33px  h2 klein */
  --fs-2xl:  clamp(1.85rem, 1.3rem + 2.4vw, 2.5rem);   /* 31–42px  h2 */
  --fs-3xl:  clamp(2.3rem, 1.5rem + 3.6vw, 3.6rem);    /* 39–61px  h1 hero */

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --ls-display: -.03em;
  --ls-heading: -.02em;
  --ls-eyebrow:  .14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---- Spacing (4px-grid) ---------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --section-y: clamp(64px, 9vw, 112px);  /* verticale sectie-padding */
  --gutter:    clamp(20px, 5vw, 48px);   /* horizontale pagina-marge */
  --maxw:      1160px;                   /* content-breedte */
  --measure:   62ch;                     /* max regellengte lopende tekst */

  /* ---- Vorm ------------------------------------------------ */
  --radius:    14px;  /* kaarten, banden */
  --radius-sm: 10px;  /* knoppen, velden */
  --radius-xs: 6px;   /* labels, tags */

  --shadow-sm: 0 1px 2px rgba(0,51,102,.06), 0 4px 16px rgba(0,51,102,.05);
  --shadow-md: 0 10px 40px rgba(0,51,102,.10);

  /* ---- Beweging -------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .15s;
  --dur: .25s;

  /* ---- Lagen ----------------------------------------------- */
  --z-header: 50;
}