/* Membrix design tokens — gegenereerd uit brand/tokens.json (A+, 25 sep 2026).
   Licht is het standaardthema; [data-theme="dark"] schakelt naar Nacht. */

:root, [data-theme="light"] {
  --bg-000: #f4f3ee;
  --bg-100: #ffffff;
  --bg-200: #fafaf7;
  --bg-tonal: #eeece6;
  --bg-inverse: #14201b;
  --line-hair: #eeece6;
  --line-strong: #d6d3ca;
  --ink: #15171b;
  --ink-2: #545962;
  --ink-3: #656b75;
  --ink-dim: #9a9fa8;
  --ink-on-inverse: #f4f3ee;
  --ink-on-inverse-2: #9db3a6;
  --brand: #0e7a5a;
  --brand-soft: #e1f2ea;
  --brand-strong: #0b5c44;
  --mint: #2fbf8f;
  --sport-voetbal: #0e7a5a;
  --sport-hockey: #1d4ed8;
  --sport-turnen: #c2410c;
  --sport-zwemmen: #0e7490;
  --sport-basketbal: #b45309;
  --sport-wielrennen: #6d28d9;
  --ok: #067647;
  --ok-soft: #dcfae6;
  --ok-dot: #0e7a5a;
  --warn: #a16207;
  --warn-soft: #fef3c7;
  --warn-dot: #f5c26b;
  --danger: #b42318;
  --danger-soft: #fee4e2;
  --danger-dot: #e4572e;
  --info: #1d4ed8;
  --info-soft: #dbeafe;
  --shadow-none: none;
  --shadow-float: 0 6px 18px rgba(21, 23, 27, 0.08);
  --shadow-sheet: 0 12px 32px rgba(21, 23, 27, 0.28);
}

[data-theme="dark"] {
  --bg-000: #0f1714;
  --bg-100: #14201b;
  --bg-200: #1a2822;
  --bg-tonal: #22312b;
  --bg-inverse: #f4f3ee;
  --line-hair: #26352e;
  --line-strong: #3a4a42;
  --ink: #f4f3ee;
  --ink-2: #cfe3d8;
  --ink-3: #9db3a6;
  --ink-dim: #6f8a7d;
  --ink-on-inverse: #15171b;
  --ink-on-inverse-2: #545962;
  --brand: #2fbf8f;
  --brand-soft: #1c3a2f;
  --brand-strong: #5fd3a9;
  --ok: #5fd3a9;
  --ok-soft: #173b2b;
  --ok-dot: #2fbf8f;
  --warn: #f5c26b;
  --warn-soft: #3b2f0e;
  --danger: #ff8a80;
  --danger-soft: #42201c;
  --info: #93b4ff;
  --info-soft: #1a2a4d;
  --shadow-float: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 12px 32px rgba(0, 0, 0, 0.6);
}

:root {
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --duur-tik: 100ms;
  --duur-overgang: 150ms;
  --duur-lang: 200ms;
  --uitloop: cubic-bezier(0.2, 0, 0, 1);
  --schaal-indrukken: 0.97;
}

/* Tekststijlen */
.display  { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.stat     { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.h1       { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.h2       { font-family: var(--font-display); font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.time     { font-family: var(--font-display); font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wordmark { font-family: var(--font-display); font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.h3       { font-family: var(--font-sans); font-size: 15px; line-height: 1.3; font-weight: 700; }
.body     { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; font-weight: 400; }
.ui       { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 500; }
.row      { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.caption  { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; font-weight: 400; }
.label    { font-family: var(--font-sans); font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }