/* ==========================================================================
   FJ Studio — base.css
   Design tokens, font, reset, typografie, toegankelijkheid
   Richting: energiek maar volwassen — witte basis, diep inkt, één violet
   accent met oranje als tweede kleur, ruime afgeronde vlakken en
   uitgesproken beweging.
   ========================================================================== */

/* Instrument Sans (SIL Open Font License) — variabel: gewicht 400–700,
   breedte 75–100%. Zelf gehost: geen verzoeken naar derden. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url("../assets/fonts/instrument-sans-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/instrument-sans-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 26%;
}

:root {
  /* ---- Kleur ---- */
  --c-paper: #FFFFFF;        /* basis */
  --c-tint: #F3F2F7;         /* koel lichtgrijs vlak */
  --c-ink: #14111F;          /* tekst en donkere vlakken */
  --c-ink-2: #5A5668;        /* secundaire tekst (contrast 7:1 op wit) */
  --c-line: rgba(20, 17, 31, 0.12);
  --c-grape: #5434F0;        /* hoofdaccent: violet */
  --c-tangerine: #FF5A1F;    /* tweede accent: oranje, spaarzaam */
  --c-bubble: #E7E2FB;       /* lavendel vlak */
  --c-sun: #ECEAE4;          /* steen vlak */
  --c-mint: #DCEFE7;         /* salie vlak, ook voor succes */
  --c-on-grape: #FFFFFF;
  --c-error: #C8102E;
  --c-draft: #FFD66B;

  /* ---- Typografie ---- */
  --font: "Instrument Sans", "Instrument Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-lg: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-3xl: clamp(2.75rem, 1.8rem + 4.4vw, 6rem);
  --fs-display: clamp(3.25rem, 1.2rem + 8.6vw, 10rem);

  /* ---- Ruimte ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --container: 1400px;
  --measure: 62ch;

  /* ---- Vorm ---- */
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: clamp(28px, 2vw + 16px, 48px);
  --r-pill: 999px;

  /* ---- Beweging ---- */
  --header-h: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* lichte overshoot: speels */
  --t-fast: 160ms;
  --t-med: 380ms;

  /* Breakpoints (ter documentatie): sm 600 · md 900 · nav 1080 · lg 1200 · xl 1600 */
  color-scheme: light;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  min-height: 100vh;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
::selection { background: var(--c-grape); color: #fff; }

/* ---- Typografie ---- */
.display {
  font-size: var(--fs-display);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.h1 {
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 0.95;
  letter-spacing: -0.032em;
}
.h2 {
  font-size: var(--fs-2xl);
  font-weight: 650;
  font-stretch: 90%;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.lead { font-size: var(--fs-lg); line-height: 1.5; color: var(--c-ink-2); max-width: 46ch; }
.muted { color: var(--c-ink-2); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose p, .prose ul { color: var(--c-ink-2); }
.prose strong { color: var(--c-ink); font-weight: 650; }
.prose h2 { margin-top: 2em; font-size: var(--fs-xl); font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--c-ink); text-decoration-color: var(--c-grape); }
.tnum { font-variant-numeric: tabular-nums; }
code { font-size: 0.9em; background: rgba(27, 15, 59, 0.07); padding: 0.05em 0.35em; border-radius: 6px; }

/* ---- Toegankelijkheid ---- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 1000;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 3px solid var(--c-grape);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Paginaovergangen (native, valt netjes terug) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 200ms ease both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

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