/*
 * tokens-shared.css — design-system v2 · theme-agnostic tokens
 *
 * Scope: `scope/design-system.md` sectie 5 · register 3.11 + 3.11a
 *
 * Bevat 5 van de 7 token-categorieën (theme-independent):
 *   · Radius · Spacing · Typography · Motion · Z-index
 * De 2 theme-afhankelijke (colors + shadows) staan in
 * `tokens-light.css` + `tokens-dark.css`.
 * Reduced-motion WCAG-override staat onderaan dit bestand.
 *
 * Laad-volgorde in index.html:
 *   <link rel="stylesheet" href="src/css/tokens-shared.css">
 *   <link rel="stylesheet" href="src/css/tokens-light.css">
 *   <link rel="stylesheet" href="src/css/tokens-dark.css">
 *   <link rel="stylesheet" href="src/css/components.css">
 *   <link rel="stylesheet" href="style.css">
 */

:root {
  /* ─────────── RADIUS ─────────── */
  --r-sm: 6px;         /* small chips, mini-badges */
  --r-md: 12px;        /* cards, strips */
  --r-lg: 16px;        /* hero cards */
  --r-xl: 24px;        /* overlays, bottom-sheets */
  --r-2xl: 32px;       /* xl overlays */
  --r-full: 999px;     /* chips, buttons, pills */

  /* ─────────── SPACING (4px-base) ─────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ─────────── TYPOGRAPHY ─────────── */
  --font-sans:
    "IBM Plex Sans",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto,
    system-ui, sans-serif;
  --font-mono:
    "IBM Plex Mono",
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font sizes */
  --f-xs: 11px;
  --f-sm: 12px;
  --f-base: 14px;
  --f-md: 16px;
  --f-lg: 18px;
  --f-xl: 22px;
  --f-2xl: 28px;
  --f-3xl: 36px;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-base: 1.5;
  --lh-relaxed: 1.6;

  /* Letter-spacing (additive — niet in scope-doc maar nodig voor headings/caps) */
  --tracking-tight: -0.02em;    /* grote headings */
  --tracking-wide: 0.02em;      /* buttons */
  --tracking-caps: 0.08em;      /* uppercase eyebrows */

  /* ─────────── MOTION ─────────── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ─────────── Z-INDEX ─────────── */
  --z-base: 1;
  --z-nav: 10;         /* topbar, sticky-headers */
  --z-overlay: 100;    /* backdrop achter modal */
  --z-modal: 1000;     /* center-modal, bottom-sheet */
  --z-toast: 2000;     /* celebrations (altijd bovenaan) */
}

/* ─────────── REDUCED-MOTION WCAG 2.1 ─────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}