/* =========================================================
   BASE — design tokens, typografie, reset
   Alle visuele keuzes staan bovenaan als variabelen.
   Werkt met OKLCH voor perceptueel uniforme kleur.
   ========================================================= */

:root {
  /* ---- Merk ---------------------------------------------- */
  /* #E07050 ≈ oklch(66% 0.14 38). We bouwen het palet rond hue 38. */
  --brand-hue: 38;

  --accent:         oklch(66%  0.14  var(--brand-hue));
  --accent-hover:   oklch(60%  0.15  var(--brand-hue));
  --accent-ink:     oklch(42%  0.12  var(--brand-hue));
  --accent-soft:    oklch(94%  0.04  var(--brand-hue));
  --accent-softer:  oklch(97%  0.02  var(--brand-hue));

  /* ---- Oppervlakken (licht maar warm) -------------------- */
  --bg:         oklch(98.4%  0.004 var(--brand-hue));  /* licht, subtiel warm */
  --surface:    oklch(99.6%  0.001 var(--brand-hue));  /* bijna wit (cards) */
  --surface-2:  oklch(96.5%  0.007 var(--brand-hue));
  --surface-3:  oklch(93%    0.01  var(--brand-hue));
  --sidebar-bg: oklch(97.2%  0.006 var(--brand-hue));  /* iets warmer dan bg */

  /* ---- Tekst (warme inkt, geen pure zwart) --------------- */
  --ink:        oklch(18%   0.015 var(--brand-hue));   /* primair */
  --ink-soft:   oklch(42%   0.018 var(--brand-hue));   /* muted */
  --ink-whisper:oklch(60%   0.012 var(--brand-hue));   /* softest */
  --ink-invert: oklch(99%   0.003 var(--brand-hue));

  /* ---- Lijnen -------------------------------------------- */
  --rule:        oklch(90%  0.008 var(--brand-hue));
  --rule-strong: oklch(82%  0.012 var(--brand-hue));

  /* ---- Status (ingetogen, één tint per status) ----------- */
  --ok:         oklch(52%   0.10  145);
  --ok-soft:    oklch(94%   0.035 145);
  --warn:       oklch(62%   0.12  75);
  --warn-soft:  oklch(94%   0.04  75);
  --info:       oklch(55%   0.08  230);
  --info-soft:  oklch(94%   0.03  230);

  /* ---- Typografie ---------------------------------------- */
  /* Display: Gloock — editorial serif met karakter (Google Fonts)
     Body: Geist — moderne sans, niet Inter (Google Fonts)
     Mono: JetBrains Mono voor codefragmenten (spaarzaam) */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale — major third (1.333) voor echte hiërarchie */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.333rem;  /* 21 */
  --fs-xl:   1.777rem;  /* 28 */
  --fs-2xl:  2.369rem;  /* 38 */
  --fs-3xl:  3.157rem;  /* 50 */
  --fs-4xl:  clamp(3.2rem, 6vw, 5.6rem); /* 51 → 90, display */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-norm:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.14em;

  /* ---- Ruimte (4pt schaal, semantisch) ------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---- Radius (ingetogen; niet overal ronde hoeken) ------ */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---- Schaduw (zacht, getint) --------------------------- */
  --shadow-xs: 0 1px 2px oklch(20% 0.02 var(--brand-hue) / 0.04);
  --shadow-sm: 0 2px 6px oklch(20% 0.02 var(--brand-hue) / 0.05);
  --shadow-md: 0 10px 28px oklch(20% 0.02 var(--brand-hue) / 0.08),
               0 2px 6px oklch(20% 0.02 var(--brand-hue) / 0.04);
  --shadow-lg: 0 24px 60px oklch(20% 0.02 var(--brand-hue) / 0.10),
               0 6px 14px oklch(20% 0.02 var(--brand-hue) / 0.05);

  /* ---- Layout -------------------------------------------- */
  --sidebar-w: 260px;
  --topbar-h:  72px;
  --page-pad:  clamp(1.5rem, 4vw, 3rem);
  --content-max: 1240px;

  /* ---- Motion -------------------------------------------- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
}

/* ---- Reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-norm);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11"; /* Geist stylistic sets */
}

/* ---- Typografie ----------------------------------------- */
h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
}

/* Display: editorial serif, ruim, krachtig */
.display,
h1.display,
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "wdth" 100, "opsz" 48;
}

/* Sans headings (default voor H2-H5) */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: 600; }
h5 { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-whisper); }

p  { margin: 0; max-width: 72ch; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-whisper);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---- Utility -------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted   { color: var(--ink-soft); }
.whisper { color: var(--ink-whisper); }
.accent  { color: var(--accent); }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- Focus ---------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- Motion preferences --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Selection ----------------------------------------- */
::selection { background: var(--accent-soft); color: var(--accent-ink); }