/* EDA design tokens — bron: docs/website/DESIGN_SYSTEM.md. Wijzig hier én daar. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Oppervlakken */
  --ivory: #F7F6F2;
  --stone: #ECEAE4;
  --paper: #FFFFFF;
  --charcoal: #181918;
  /* Tekst */
  --ink: #181918;
  --sub: #626560;
  --muted: #6B6963;
  /* Lijnen */
  --line: #D5D3CC;
  --line-soft: #E3E1DB;
  --faint: #B8B5AE;          /* alleen niet-tekst */
  /* Blauw = de gebeurtenis */
  --blue: #1769FF;
  --blue-ink: #1259DB;       /* blauwe tekst */
  --blue-07: rgba(23,105,255,.07);
  --blue-14: rgba(23,105,255,.14);
  --blue-40: rgba(23,105,255,.40);
  --blue-on-dark: #6E9BFF;
  --on-dark: #F7F6F2;
  --on-dark-sub: #A8A59D;
  --conflict: #B7791F;
  --ok: #3F7D5A;

  /* Typografie */
  --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-display: clamp(56px, 7.2vw, 104px);
  --t-h2: clamp(40px, 5vw, 68px);
  --t-h3: clamp(26px, 2.6vw, 34px);
  --t-lede: clamp(18px, 1.5vw, 20px);
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 12px;
  --t-ui: 13px;
  --t-ui-sm: 12px;
  --t-ui-xs: 11px;
  --t-mono: 12.5px;

  /* Ruimte */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px; --s-13: 160px;
  --max: 1200px;
  --max-stage: 1320px;
  --margin: 48px;

  /* Vorm */
  --r-1: 6px;
  --r-2: 10px;
  --shadow-stage: 0 1px 0 rgba(24,25,24,.04), 0 24px 48px -24px rgba(24,25,24,.18);
  --shadow-stage-rest: 0 1px 0 rgba(24,25,24,.03), 0 12px 24px -16px rgba(24,25,24,.10);

  /* Motion (gespiegeld in assets/js/motion.js) */
  --d-micro: 160ms;
  --d-ui: 360ms;
  --d-concept: 900ms;
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);

  --z-sticky: 50; --z-nav: 100;
}

@media (max-width: 1279px) { :root { --margin: 40px; } }
@media (max-width: 1023px) { :root { --margin: 32px; } }
@media (max-width: 639px)  { :root { --margin: 20px; } }