/* ============================================================ */
/* ciiic-tokens.css — AUTOMATISCH GEGENEREERD, niet bewerken.    */
/* ============================================================ */
/* Bron: web/src/styles/_variables.scss (brand-primitieven-blok, laag 1). */
/* Regenereren: node scripts/generate-ciiic-tokens.mjs (pnpm tokens:build). */
/*                                                              */
/* Alleen app-agnostische brand-primitieven: kleuren, typescale, */
/* spacing, radii, shadows, easing/durations, layout. GEEN dark- */
/* theme-semantiek (surfaces/status/glass) — die blijft per app. */
/* De font-family-tokens (--font-body/--font-caption/…) levert de */
/* adopterende app zelf (CIIIC-fonts); hier staan alleen de slots.*/
/* ============================================================ */

:root {
  /* ── Brand Colors (official — 3 base + matte black + white) ── */
  /* Lime   RGB 219/255/0   #DBFF00  — accent only (logo is white) */
  /* Teal   RGB 55/92/93    #375C5D */
  /* Sage   RGB 142/168/162 #8EA8A2  — third base, warms + lightens */
  /* Matte black #141414 (text + deep background), pure white #FFFFFF */
  --color-offblack: #141414;
  --color-yellow: #DBFF00;
  --color-green: #375C5D;
  --color-sage: #8EA8A2;
  --color-chalk: #E0E6E2;

  /* Matte black ink used on light surfaces */
  --color-ink: #141414;

  /* Brand-color aliases — alternatieve namen voor de primitieven hierboven, */
  /* zodat een enkele var() nooit terugvalt op "niets". */
  --color-teal: var(--color-green); /* brand teal == --color-green */
  --color-teal-light: var(--color-green);
  --color-black: var(--color-offblack); /* matte black #141414 */
  --color-offwhite: var(--color-chalk); /* brand off-white #E0E6E2 */
  --color-lime: var(--color-yellow);
  --color-lime-rgb: 219, 255, 0; /* triplet for rgba(var(--color-lime-rgb), a) */
  --color-lime-dark: #A6C400; /* darkened lime for gradients */

  /* ── Typography ──────────────────────────────────────────── */
  /* De vier familie-tokens (--font-heading-display, --font-heading, */
  /* --font-body, --font-caption) worden NIET meer hier gezet maar door de */
  /* Astro Fonts API (<Font /> in BaseLayout/route.astro): die definieert ze */
  /* inclusief automatisch gegenereerde size-adjust fallback-families. */
  /* Hier opnieuw declareren zou die fallback-metrics wegcascaden. */

  /* Type scale (rem) — names the raw font-sizes already used across */
  /* components so blocks share one hierarchy instead of ad-hoc values. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Font/scale aliases — duplicate names that map onto the canonical scale. */
  --font-mono: var(--font-caption); /* 'JetBrains Mono', monospace */
  --font-sans: var(--font-body);
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-xl: var(--text-xl);

  /* ── Line Heights ────────────────────────────────────────── */
  /* Eén schaal i.p.v. per-template waarden (design review 2026-07-03, B). */
  /* Snap-regels: 1.15→tight · 1.4/1.45→snug · 1.6/1.65→normal · */
  /* 1.7/1.8→relaxed. Artikel-prose staat op relaxed (was 1.8). */
  --leading-tight: 1.15; /* display-/hero-koppen */
  --leading-snug: 1.45; /* artikel-leads */
  --leading-normal: 1.6; /* intro's, omschrijvingen, UI-tekst */
  --leading-relaxed: 1.7; /* artikel-body / prose */

  /* ── Spacing Scale ───────────────────────────────────────── */
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-xs: 2px; /* badges/chips (verving 18× een 2px-literal, review C11) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --radius-pill: var(--radius-full);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* ── Transitions ─────────────────────────────────────────── */
  /* Gebundelde duration + ease, voor het dominante geval `prop Xs ease`. */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  /* Kaart-lift: rustige, symmetrische flow (easeInOutExpo) - traag */
  /* aanzetten, vloeiend versnellen, zacht uitrollen. Bewust iets langer */
  /* dan --transition-slow zodat de grow aanwezig is zonder te 'poppen' */
  /* (past bij de mellow golf-vibe van de site). Zet transform én */
  /* box-shadow op dit token zodat de lift één beweging is. */
  --transition-hover-lift: 400ms var(--ease-in-out-expo);
  /* Micro-float voor kleine interactieve elementen (pills, link-rijen, */
  /* nav-links): zelfde flow-curve als de kaart-lift, maar korter zodat */
  /* de feedback direct blijft voelen. Paar met de float-hover mixin. */
  --transition-float: 250ms var(--ease-in-out-expo);

  /* Losse interaction-durations, te paren met een --ease-* token wanneer */
  /* de easing niet generiek `ease` is (bv. `transform var(--duration-slower) var(--ease-reveal)`). */
  --duration-fast: 150ms; /* micro: hover, kleur, focus */
  --duration-base: 200ms; /* component: dropdowns, toggles */
  --duration-slow: 300ms; /* deliberate: kaart-lift, underline */
  --duration-slower: 500ms; /* grotere vlakken: hero-opacity, teaser-transform */

  /* Snap-regels voor de hele codebase (één bron van waarheid): */
  /* duration: 0.15s→fast · 0.2s/0.25s→base · 0.3s→slow · 0.4s/0.5s→slower */
  /* easing:   generiek ease/ease-out → --transition-* of --ease-out */
  /* cubic-bezier(0.4,0,0.2,1) → --ease-reveal */
  /* overshoot/bounce → --ease-spring / --ease-spring-pop */
  /* symmetrisch → --ease-in-out */
  /* Buiten scope (blijven letterlijk): infinite/ambient/decoratieve loops */
  /* en de --duration-spinner/-reveal/-stagger/-vt-* tokens hieronder. */

  /* ── Easing Curves ──────────────────────────────────────── */
  /* Standard curves for consistent animation feel */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Exponentiële in-out: uitgesprokener S-curve dan --ease-in-out */
  /* (langzamer begin/einde, sneller midden). Voor bewegingen die */
  /* mogen opvallen maar vloeiend moeten blijven. */
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-reveal: cubic-bezier(0.4, 0, 0.2, 1);

  /* linear() springs — echte overshoot mét natrilling, wat één */
  /* cubic-bezier niet kan. Pop voor micro-interacties (hover-lift, */
  /* iconen), settle voor zachte landingen van grotere vlakken. */
  --ease-spring-pop: linear(
    0, 0.32 12%, 0.82 26%, 1.08 42%, 1.02 60%, 0.99 77%, 1
  );
  --ease-spring-settle: linear(
    0, 0.06 10%, 0.31 32%, 0.72 60%, 0.96 80%, 1.01 91%, 1
  );

  /* ── Animation Durations ────────────────────────────────── */
  /* Standardized durations for animations */
  --duration-spinner: 0.8s;
  --duration-reveal: 600ms;
  --duration-stagger: 80ms;
  --duration-vt-fast: 0.25s;
  --duration-vt-base: 0.35s;
  --duration-vt-slow: 0.45s;
  /* Title-flight (card title → detail H1). Slower than the UA default morph */
  /* so the "vliegende" titel duidelijk opvalt. */
  --duration-vt-title: 0.6s;
  /* Image-flight (card image → detail hero image). Same treatment as the */
  /* title: slower than the UA default so the featured image visibly "flies" */
  /* from the card into the hero on navigation. */
  --duration-vt-image: 0.6s;

  /* ── Layout ────────────────────────────────────────────────── */
  --header-height: 72px;

  /* Container width as a CSS custom property (mirrors $container-max below). */
  --container-max: 1200px;
  --container-width: var(--container-max);

  /* Leeskolom-measure (design review 2026-07-03, C3). Regel: kolommen/ */
  /* containers gebruiken --measure (px, zodat beeld en tekst dezelfde */
  /* linkerkant delen), brede blok-kolommen (FAQ, featured, wegwijzer) */
  /* --measure-wide. Losse tekst ín een bredere kolom mag 65ch houden */
  /* (typografisch maximum, geen kolombreedte). */
  --measure: 720px;
  --measure-wide: 800px;
}