/* ================================================================
   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 */
  --tint-movir:    #FEF5F3;
  --tint-euphoria: #F7F4FF;
  --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;
}

/* ──────────── 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);
}