/* GetFound — tokens, 1:1 uit design-system.md (Seline Analytics style reference).
   Niets in dit bestand mag een builder overschrijven. Nieuwe waarde nodig?
   Dan hoort hij hier, niet lokaal in een sectie. */

:root {
  /* Kleur — stone-neutralen plus precies één cyan */
  --color-stone-canvas: #fafaf9;
  --color-pure-white:   #ffffff;
  --color-stone-border: #e8e6e5;
  --color-stone-muted:  #d6d3d1;
  --color-ash-gray:     #a8a29e;
  --color-warm-gray:    #78716c;
  --color-ink-black:    #0c0a09;
  --color-soot:         #1c1917;
  --color-sky-wash:     #c1e1f7;

  /* Markering — GEMETEN op de referentie zelf, niet overgenomen uit de Refero-export.
     Die export noemde #3398e1 op #c1e1f7; dat geeft 2,29:1 en maakt het gemarkeerde woord
     het zwakste van de kop. Op seline.com staat werkelijk #e6f1f8 met #236796 = 5,30:1,
     waardoor het gemarkeerde woord juist het donkerste op de regel is. */
  --color-hl-wash:      #e6f1f8;
  --color-hl-ink:       #236796;
  --color-cyan-signal:  #3ba6f1;  /* enige gevulde chromatische kleur: primaire CTA */
  --color-cyan-edge:    #3398e1;  /* outlines, links — nooit promoveren tot CTA-vulling */

  /* Type */
  --font-display: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-caption:      10px;
  --text-body:         14px;   /* dominante ritme — niet breken */
  --text-body-lg:      16px;
  --text-subheading:   20px;
  --text-heading-sm:   32px;
  --text-display:      52px;

  --lh-caption:    2.3;
  --lh-body:       1.64;
  --lh-body-lg:    1.69;
  --lh-subheading: 1.2;
  --lh-heading-sm: 1.25;
  --lh-display:    1.12;

  --ls-body:       0.004em;
  --ls-subheading: -0.005em;
  --ls-heading-sm: -0.025em;
  --ls-display:    -0.021em;

  /* Gewichten — display staat ALTIJD op 400. Nadruk komt uit grootte + highlight-span. */
  --weight-display: 400;
  --weight-body:    400;
  --weight-medium:  500;

  /* Ruimte — basis 4px */
  --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-24: 96px;

  --section-gap: 96px;
  --content-max: 1200px;

  /* Vorm */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* Schaduw — de diepe variant mag PRECIES ÉÉN keer op de pagina staan */
  --shadow-card:     0 1px 2px rgba(12, 10, 9, 0.04);
  --shadow-floating: 0 24px 45px rgba(12, 10, 9, 0.10);

  /* Motion — één entree-taal, alles ease-out, alles >= 300ms */
  --dur-enter: 400ms;
  --dur-draw:  1200ms;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --stagger:   60ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-stone-canvas);
  color: var(--color-warm-gray);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--color-ink-black);
}

h1 { font-size: var(--text-display);    line-height: var(--lh-display);    letter-spacing: var(--ls-display); }
h2 { font-size: var(--text-heading-sm); line-height: var(--lh-heading-sm); letter-spacing: var(--ls-heading-sm); }
h3 { font-size: var(--text-subheading); line-height: var(--lh-subheading); letter-spacing: var(--ls-subheading); }

@media (max-width: 720px) {
  :root { --text-display: 34px; --text-heading-sm: 26px; --section-gap: 64px; }
}

a { color: var(--color-cyan-edge); text-decoration: none; }

/* --- Componenten uit het systeem --- */

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); }

.eyebrow {
  font-size: var(--text-body);
  color: var(--color-warm-gray);   /* was ash-gray: 2,41:1, te zwak om te dragen */
  letter-spacing: var(--ls-body);
}

/* Highlight-span: max ÉÉN per kop. Bleke wash, donkere tekst — zie de tokencommentaar. */
.hl {
  color: var(--color-hl-ink);
  background: var(--color-hl-wash);
  border-radius: var(--radius-sm);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
  transition: transform var(--dur-enter) var(--ease), background-color var(--dur-enter) var(--ease);
}
.btn-primary { background: var(--color-cyan-signal); color: #fff; }
.btn-ghost   { background: var(--color-pure-white); color: var(--color-ink-black); border-color: var(--color-stone-border); }
.btn:hover   { transform: translateY(-1px); }

.card {
  background: var(--color-pure-white);
  border: 1px solid var(--color-stone-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* De enige plek waar --shadow-floating hoort */
.floating { background: var(--color-pure-white); border: 1px solid var(--color-stone-border);
            border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); }

/* --- Motion: één entree-patroon voor de hele pagina --- */

@keyframes enter {
  from { opacity: 0; filter: blur(8px); transform: translateY(-6px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

.enter { opacity: 0; }
.enter.in { animation: enter var(--dur-enter) var(--ease) forwards; }

@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-dot {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--color-cyan-signal); display: inline-block;
  animation: livepulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .enter, .enter.in { opacity: 1; animation: none; filter: none; transform: none; }
  .live-dot { animation: none; }
  * { transition: none !important; }
}