/* ================================================================
   SPAIK DESIGN TOKENS — compact, self-contained voor /spaik-design
   Bron: SPAIK-io/spaik-design-system/colors_and_type.css (Nov 2025)
   Voor full @font-face declarations + alle aliases:
   https://github.com/SPAIK-io/spaik-design-system
   ================================================================ */

:root {
  /* ──────────── KLEUREN ──────────── */
  --spaik-off-white:    #F3EDED;
  --spaik-off-black:    #0B0B0B;
  --spaik-orange:       #FF7150;
  --spaik-orange-wcag:  #D4553A;  /* oranje tekst op wit, 4.6:1 */
  --spaik-pastel-green: #BADAD5;
  --spaik-sky-blue:     #A2BDF0;
  --spaik-clay:         #DEDCCC;
  --spaik-lilac:        #E1D2FF;
  --spaik-fail:         #9A3324;  /* faal-/waarschuw-ink (tekst/strokes) */
  --spaik-pastel-red:   #EFC9C1;  /* 5e pastel, risico-tegel */

  /* Text scale */
  --fg-1: var(--spaik-off-black);  /* primary text */
  --fg-2: #383733;                  /* body text */
  --fg-3: #555555;                  /* secondary text */
  --fg-4: #8A8A8A;                  /* muted, labels */
  --fg-5: #ACACAC;                  /* disabled, borders */
  --fg-on-dark: var(--spaik-off-white);

  /* Semantic aliases */
  --bg-paper:     var(--spaik-off-white);
  --bg-card:      #FFFFFF;
  --bg-ink:       var(--spaik-off-black);
  --ink-primary:  var(--spaik-off-black);
  --ink-inverse:  var(--spaik-off-white);
  --accent:       var(--spaik-orange);

  /* Klant-casetints.
     Regel (besluit 18 aug 2026): hue uit het logo van de klant, verzadiging
     naar deze familie getrokken. Nooit de rauwe merkkleur, en oranje blijft
     van SPAIK zelf. Accent = de dragende kleur, tint = de bleke band eronder. */
  --accent-sig:      #D74267;
  --tint-sig:        #FDF2F5;
  --accent-movir:    #FF7150;
  --tint-movir:      #FEF5F3;
  --accent-euphoria: #A78BFA;
  --tint-euphoria:   #F7F4FF;
  --accent-reditus:  #34D399;
  --tint-reditus:    #EEF6F5;

  /* ──────────── TYPOGRAFIE ──────────── */
  /* Proprietary fonts — woff2/otf in spaik-design-system/fonts/.
     Hier alleen de family-stacks met fallback naar serif/sans. */

  --font-primary:
    "PP Agrandir Tight", "Agrandir Tight", "Agrandir Variable",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-specific:
    "IvyPresto Headline", "Ivy Presto Headline",
    "Ivy Presto", "IvyPresto", "Ivy Journal", Georgia, serif;

  --font-body:
    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --font-mono:
    "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Google Fonts fallbacks (zonder licentie):
     IvyPresto Headline Thin → Cormorant Garamond ExtraLight
     PP Agrandir Tight Medium → Space Grotesk Medium
     SF Pro Text → Inter
     Voeg toe via <link rel="stylesheet" href="https://fonts.googleapis.com/...">. */

  /* Type-roles: gebruik deze i.p.v. raw sizes */
  --display-font:    var(--font-specific);
  --display-weight:  100;
  --display-size:    clamp(96px, 12vw, 224px);
  --display-line:    0.95;
  --display-track:   -0.02em;

  --specific-font:   var(--font-specific);
  --specific-weight: 100;
  --specific-size:   clamp(44px, 5.4vw, 80px);
  --specific-line:   1.05;
  --specific-track:  -0.015em;

  --primary-font:    var(--font-primary);
  --primary-weight:  500;
  --primary-size:    clamp(28px, 3.2vw, 48px);
  --primary-line:    1.1;
  --primary-track:   -0.02em;

  --label-font:      var(--font-primary);
  --label-weight:    700;
  --label-size:      20px;
  --label-line:      1;
  --label-track:     -0.01em;

  --body-font:       var(--font-body);
  --body-weight:     400;
  --body-size:       16px;
  --body-line:       1.5;
  --body-track:      0;

  --button-font:     var(--font-primary);
  --button-weight:   500;
  --button-size:     15px;
  --button-line:     1;
  --button-track:    0.01em;

  /* ──────────── SPACING ──────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ──────────── RADII ──────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-2xl: 40px;   /* brandbook card, hero image */
  --radius-3xl: 56px;
  --radius-full: 999px; /* pill button */

  /* ──────────── SHADOWS ──────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);

  /* ──────────── LAYOUT ──────────── */
  --max-w-prose: 64ch;
  --max-w-site:  1080px;

  /* ──────────── SLIDES (vaste 1280×720-stage) ────────────
     De type-rollen hierboven schalen met de viewport (clamp/vw) en zijn voor
     pagina's. Een slide heeft een vaste stage, dus vaste px. deck.css leest
     alleen deze tokens. IvyPresto op 44px en groter wil line-height ≥1.12
     (zie R8 in SKILL.md): de display-cut tekent buiten zijn regelbox. */
  --slide-w:          1280px;
  --slide-h:          720px;
  --slide-pad:        62px 72px 56px;
  --slide-mark:       28px;   /* logomark rechtsboven, op elke slide (M10) */
  --slide-line-display: 1.12;

  --slide-cover:      88px;   /* cover, slot, sectie-opener */
  --slide-bewering:   104px;  /* de ene zin van een bewering-slide */
  --slide-title:      56px;   /* kop van een content-slide */
  --slide-h3:         34px;   /* IvyPresto, kop in een kaart, rij of fase */
  --slide-stat:       72px;   /* kerngetal in een rij */
  --slide-stat-xl:    168px;  /* het ene getal van de slide */
  --slide-lead:       26px;
  --slide-body:       24px;   /* 18pt: de projectievloer van R3 */
  --slide-small:      20px;
  --slide-label:      15px;   /* labels en eyebrows, ≥8pt */
  --slide-meta:       18px;   /* datum, status, kaartlabel: sentence case, geen kapitalen */
  --slide-stelling:   42px;   /* IvyPresto, één zin boven een grid op natuurlijke hoogte */

  --bg-card-tint:     #FAF6F6; /* kaartvlak op off-white, nooit puur wit */
  --hairline:         1px solid rgba(11, 11, 11, 0.10);
  --ink-soft:         rgba(11, 11, 11, 0.72); /* tekst op pastel: alpha, nooit grijs */
  --ink-muted:        rgba(11, 11, 11, 0.55);
}

/* Leesdeck: async rondgestuurd, van dichtbij gelezen. Zelfde stage, meer
   inhoud per slide. Zet data-dichtheid="lees" op <html> en <!-- gate:mode lees -->. */
:root[data-dichtheid="lees"] {
  --slide-title:  46px;
  --slide-h3:     28px;
  --slide-lead:   21px;
  --slide-body:   18px;
  --slide-small:  16px;
  --slide-label:  13px;
  --slide-meta:   15px;
  --slide-stelling: 34px;
  --slide-bewering: 84px;
}

/* ──────────── BASE ──────────── */

html, body {
  background: var(--bg-paper);
  color: var(--ink-primary);
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
}

/* ──────────── TYPE ROLES (gebruik als utility classes) ──────────── */

.type-display, h1.display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-size: var(--display-size);
  line-height: var(--display-line);
  letter-spacing: var(--display-track);
  color: var(--fg-1);
  text-wrap: balance;
}

.type-specific, h1, h2.specific {
  font-family: var(--specific-font);
  font-weight: var(--specific-weight);
  font-size: var(--specific-size);
  line-height: var(--specific-line);
  letter-spacing: var(--specific-track);
  color: var(--fg-1);
  text-wrap: balance;
}

.type-primary, h2, h3.primary {
  font-family: var(--primary-font);
  font-weight: var(--primary-weight);
  font-size: var(--primary-size);
  line-height: var(--primary-line);
  letter-spacing: var(--primary-track);
  color: var(--fg-1);
}

.type-label {
  font-family: var(--label-font);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  line-height: var(--label-line);
  letter-spacing: var(--label-track);
}

.type-body {
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--fg-2);
}

/* ──────────── COMPONENTS ──────────── */

/* Primary CTA — enige plek waar oranje als fill mag (zie SKILL.md non-negotiables) */
.btn-primary {
  font-family: var(--button-font);
  font-weight: var(--button-weight);
  font-size: var(--button-size);
  letter-spacing: var(--button-track);
  background: var(--spaik-orange);
  color: white;
  border: none;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 44px;
  transition: background 0.2s ease;
}
.btn-primary:hover { background: #E25A3D; }

.btn-secondary {
  font-family: var(--button-font);
  font-weight: var(--button-weight);
  font-size: var(--button-size);
  background: transparent;
  color: var(--ink-primary);
  border: 1px solid var(--ink-primary);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 44px;
}
.btn-secondary:hover { background: var(--ink-primary); color: var(--ink-inverse); }

/* Middot proof-strip — non-negotiable uit SKILL.md */
.proof-strip {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-3);
}
.proof-strip span:not(:last-child)::after {
  content: " · ";
  margin: 0 var(--space-2);
  color: var(--spaik-orange);
}