/* BoK Toetslab: design tokens
   Token-based so this lifts cleanly into a Tailwind config later.
   Naming follows Tailwind-friendly conventions (--color-*, --space-*).
*/
:root {
  /* ─── Color ───────────────────────────────────────────── */
  --color-ink:           #0e0e10;        /* near-black, body text */
  --color-ink-soft:      #2a2a2e;
  --color-mute:          #6b6b73;        /* secondary text */
  --color-faint:         #9a9aa3;
  --color-line:          #e6e4e0;        /* hairline rule */
  --color-line-strong:   #d2d0cb;
  --color-paper:         #fbf9f6;        /* warm off-white background */
  --color-paper-2:       #f4f2ee;        /* panel/aside background */
  --color-paper-3:       #ece9e3;        /* deeper accent surface */
  --color-surface:       #ffffff;        /* cards, modals */

  --color-accent:        oklch(0.60 0.22 0);     /* magenta, primary accent */
  --color-accent-ink:    oklch(0.45 0.20 0);     /* darker hover */
  --color-accent-soft:   oklch(0.95 0.04 0);     /* tint */
  --color-accent-fg:     #ffffff;                /* text on accent */

  --color-success:       oklch(0.55 0.13 155);
  --color-warn:          oklch(0.70 0.16 75);
  --color-danger:        oklch(0.55 0.18 25);

  /* Bloom-niveau swatches (cool→warm), single chroma */
  --color-bloom-1:       oklch(0.78 0.06 240);  /* onthouden */
  --color-bloom-2:       oklch(0.78 0.06 200);  /* begrijpen */
  --color-bloom-3:       oklch(0.78 0.06 160);  /* toepassen */
  --color-bloom-4:       oklch(0.78 0.06 110);  /* analyseren */
  --color-bloom-5:       oklch(0.78 0.07 60);   /* evalueren */
  --color-bloom-6:       oklch(0.78 0.10 25);   /* creëren */

  /* ─── Type ────────────────────────────────────────────── */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-2xs: 10.5px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-norm:  1.5;

  --tracking-tight: -0.02em;
  --tracking-norm:   0em;
  --tracking-wide:   0.08em;

  /* ─── Space ───────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ─── Radii / borders ────────────────────────────────── */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  --border: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --border-ink: 1px solid var(--color-ink);

  /* ─── Shadow ──────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(14,14,16,0.04);
  --shadow-2: 0 8px 24px -12px rgba(14,14,16,0.12), 0 1px 0 rgba(14,14,16,0.04);
  --shadow-pop: 0 16px 40px -16px rgba(14,14,16,0.22);

  /* ─── Layout ──────────────────────────────────────────── */
  --topbar-h: 56px;
  --container: 1200px;

  /* ─── Motion ──────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}