/* ============================================================
   CONSTELL DESIGN TOKENS
   Bron: Homepage 2026 (Figma/PSD-import), waarden genormaliseerd.
   Dit bestand is de enige plek waar ruwe waarden staan.
   ============================================================ */

:root {
  /* ---- Kleur: basis ---- */
  --c-ink:          #17171D;   /* near-black: tekst, knoppen, donkere secties */
  --c-ink-soft:     rgba(23, 23, 29, 0.72);  /* eyebrows, bijschriften — haalt 4.5:1 op licht */
  --c-ink-40:       rgba(23, 23, 29, 0.40);  /* decoratieve meta — nooit voor leestekst */

  --c-bg:           #E2E2E2;   /* standaard pagina-achtergrond (licht warm grijs) */
  --c-bg-shade:     #CBCBCB;   /* verdiepte sectie-band */
  --c-dark:         #17171D;   /* donkere sectie-band (cijfers, contrastblokken) */

  --c-surface:      #FFFFFF;   /* kaarten */
  --c-surface-soft: #EFEFEF;   /* zachte kaarten, icon-tiles */

  /* ---- Kleur: accenten ---- */
  --c-orange:       #FF9966;   /* Avondzon: vlakken (chips, ringen, kruisjes) en tekst op donker */
  --c-orange-deep:  #A63F10;   /* Avondzon-diep: accentwoorden op lichte achtergronden (4.8:1 op nevel) */
  --c-orange-tint:  #FBAF89;   /* Avondzon-tint: highlight-pill achter inkt-tekst, hovers */
  --c-orange-wash:  #FCEDE3;   /* warme wash, alleen als groot zacht vlak */

  --c-lavender:     #C0C7FA;   /* secundair accent: chips, stat-ringen, carrousel-pijlen */
  --c-cream:        #D6C9B4;   /* tertiair: cream chips ("Plan je event") */
  --c-butter:       #FEE8BC;   /* "Nieuw & uniek" badge */
  --c-groen:        #2F7A4D;   /* alleen bevestigingsvinkjes in checklists (uit het origineel) */
  --c-groen-licht:  #8FCEA9;   /* dezelfde vinkjes op een donkere/foto-achtergrond */
  --c-widget-dark:  #232B34;   /* donkere variant van de sales-widgetknop */

  --c-on-dark:      #F4F4F5;   /* tekst op donkere vlakken */
  --c-line:         rgba(23, 23, 29, 0.12);  /* hairlines, borders */
  --c-line-strong:  rgba(23, 23, 29, 0.25);

  /* ---- Typografie ---- */
  --font-display: "Cormorant Infant", Georgia, serif;    /* koppen, cijfers, quotes */
  --font-body:    "Space Grotesk", "Segoe UI", sans-serif; /* al het andere */

  /* Koppenladder (Jorn 22-07): hero 68 · kop 58 · blokkop 50 · kaartkop 30 */
  --fs-display: clamp(2.75rem, 6vw, 4.25rem);      /* 68 — alleen de hero-h1 */
  --fs-h2:      clamp(2.125rem, 4.4vw, 3.625rem);  /* 58 — kop van een sectie */
  --fs-h3:      clamp(1.75rem, 4.5vw, 3.125rem);   /* 50 — blokkop; blijft ook op mobiel een trede onder de kop */
  --fs-kaartkop: clamp(1.5rem, 2.5vw, 1.875rem);   /* 30 — kop in een kaart of paneel */
  --fs-h4:      1.25rem;
  --fs-lead:    1.125rem;    /* intro-alinea onder een kop */
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-display: 1.05;
  --lh-heading: 1.12;
  --lh-body:    1.6;

  --ls-eyebrow: 0.2em;

  /* ---- Spacing (4px-grid) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(4rem, 10vw, 8.5rem);   /* verticale sectie-padding */
  --container:  75rem;                       /* 1200px content-breedte */
  --container-narrow: 46rem;                 /* gecentreerde tekstkolommen */

  /* ---- Vorm ---- */
  --r-pill: 999px;   /* chips, badges */
  --r-btn:  8px;     /* knoppen */
  --r-tile: 12px;    /* icon-tiles, kleine kaarten */
  --r-card: 16px;    /* kaarten */
  --r-media: 20px;   /* foto's, video-frames, grote panelen */
  --r-showcase: 28px;/* beeldkaarten die op zichzelf staan (doelgroep-kaarten) */
  --r-polaroid: 6px; /* polaroid-kader */
  --r-photo: 3px;    /* foto ín de polaroid, micro-afrondingen */

  /* ---- Schaduw ---- */
  --shadow-card: 0 24px 48px -16px rgba(23, 23, 29, 0.14);
  --shadow-tile: 0 12px 24px -12px rgba(23, 23, 29, 0.12);
  --shadow-pop:  0 32px 72px -20px rgba(23, 23, 29, 0.28);

  /* ---- Motie ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;   /* hovers, state-wissels */
  --t-med:  280ms;   /* grotere overgangen (drawer, reveals) */

  /* ---- Z-index (semantisch, nooit losse getallen) ---- */
  --z-sticky:  10;
  --z-drawer:  40;
  --z-modal:   50;
  --z-toast:   60;
  --z-tooltip: 70;
}