/* Tientamen — design tokens van het product.
   Basis: het Tientamen-systeem (tg-stijl.css uit de cse-grinder-skill), dat de eigenaar op 2026-10-19
   "exact wat ik wil" noemde: neutraal wit/koelgrijs, Inter, 1px randen, 8px radius, teal accent,
   hiërarchie uit grootte en witruimte. Elke kleur en maat in de UI komt hiervandaan. */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("inter.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --tt-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --tt-vlak: #ffffff;
  --tt-vlak-2: #f8f9fb;
  --tt-rand: #e5e7ec;
  --tt-tekst: #111827;
  --tt-tekst-2: #4b5563;
  --tt-tekst-3: #6b7280;
  --tt-accent: #0f766e;
  --tt-accent-zacht: rgb(15 118 110 / 0.08);

  --tt-t-s: 0.875rem;   /* 14 */
  --tt-t-m: 1rem;       /* 16 */
  --tt-t-l: 1.125rem;   /* 18 */
  --tt-t-xl: 1.375rem;  /* 22 */
  --tt-t-3xl: 2.75rem;  /* 44 */

  --tt-1: 4px; --tt-2: 8px; --tt-3: 12px; --tt-4: 16px; --tt-5: 24px; --tt-6: 32px; --tt-7: 48px; --tt-8: 64px;
  --tt-radius: 8px;
  --tt-kolom: 56rem;
  --tt-duur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tt-vlak: #111318; --tt-vlak-2: #16191f;
    --tt-rand: #272c35;
    --tt-tekst: #f3f4f6; --tt-tekst-2: #b8c0cc; --tt-tekst-3: #8f99a8;
    --tt-accent: #43c6b6;
    --tt-accent-zacht: rgb(67 198 182 / 0.10);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tt-vlak: #111318; --tt-vlak-2: #16191f;
  --tt-rand: #272c35;
  --tt-tekst: #f3f4f6; --tt-tekst-2: #b8c0cc; --tt-tekst-3: #8f99a8;
  --tt-accent: #43c6b6;
  --tt-accent-zacht: rgb(67 198 182 / 0.10);
}