/* ==========================================================================
   toadlabs — design tokens + basisstijlen
   Bron van waarheid: DESIGN.md. Gebruik tokens, geen losse hexwaarden.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Merkkleuren */
  --tl-ink: #121212;
  --tl-lime: #C6F135;

  /* Neutraal */
  --tl-paper: #F3F1EA;
  --tl-white: #FFFFFF;
  --tl-ink-80: #2A2A28;
  --tl-ink-60: #5C5A54;
  --tl-ink-40: #8C8A83;
  --tl-ink-20: #D9D6CC;

  /* Functioneel (alleen UI-status) */
  --tl-error: #B42318;
  --tl-success: #1F7A3A;

  /* Semantisch — licht thema (standaard) */
  --tl-bg: var(--tl-paper);
  --tl-surface: var(--tl-white);
  --tl-text: var(--tl-ink);
  --tl-text-muted: var(--tl-ink-60);
  --tl-border: var(--tl-ink);
  --tl-divider: var(--tl-ink-20);
  --tl-accent: var(--tl-lime);
  --tl-on-accent: var(--tl-ink);
  --tl-focus: var(--tl-ink);

  /* Typografie */
  --tl-font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tl-text-display: clamp(3.5rem, 2rem + 6vw, 6rem);
  --tl-text-h1: clamp(2.75rem, 1.9rem + 3.4vw, 4rem);
  --tl-text-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --tl-text-h3: 1.875rem;
  --tl-text-h4: 1.375rem;
  --tl-text-body-lg: 1.25rem;
  --tl-text-body: 1.0625rem;
  --tl-text-small: 0.875rem;
  --tl-text-label: 0.8125rem;

  /* Afronding */
  --tl-radius-0: 0;
  --tl-radius-sm: 6px;
  --tl-radius-md: 16px;
  --tl-radius-full: 999px;

  /* Randen */
  --tl-border-width: 2px;

  /* Ruimte (basis 4px) */
  --tl-space-1: 4px;
  --tl-space-2: 8px;
  --tl-space-3: 12px;
  --tl-space-4: 16px;
  --tl-space-5: 24px;
  --tl-space-6: 32px;
  --tl-space-7: 48px;
  --tl-space-8: 64px;
  --tl-space-9: 96px;
  --tl-space-10: 128px;

  /* Layout */
  --tl-content-max: 1200px;
  --tl-measure: 68ch;

  /* Beweging */
  --tl-ease: cubic-bezier(.2, .8, .2, 1);
  --tl-ease-hop: cubic-bezier(.34, 1.56, .64, 1);
  --tl-duration-fast: 120ms;
  --tl-duration: 220ms;
  --tl-duration-slow: 400ms;
}

/* Donker thema: zet data-theme="dark" op <html>, of volg het systeem */
:root[data-theme="dark"] {
  --tl-bg: var(--tl-ink);
  --tl-surface: var(--tl-ink-80);
  --tl-text: var(--tl-paper);
  --tl-text-muted: var(--tl-ink-40);
  --tl-border: var(--tl-paper);
  --tl-divider: var(--tl-ink-80);
  --tl-focus: var(--tl-lime);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tl-bg: var(--tl-ink);
    --tl-surface: var(--tl-ink-80);
    --tl-text: var(--tl-paper);
    --tl-text-muted: var(--tl-ink-40);
    --tl-border: var(--tl-paper);
    --tl-divider: var(--tl-ink-80);
    --tl-focus: var(--tl-lime);
  }
}

/* ---------- Basis ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tl-bg);
  color: var(--tl-text);
  font-family: var(--tl-font-sans);
  font-size: var(--tl-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .tl-display { font-weight: 700; margin: 0 0 .5em; text-wrap: balance; }
.tl-display { font-size: var(--tl-text-display); line-height: .95; letter-spacing: -.04em; }
h1 { font-size: var(--tl-text-h1); line-height: 1; letter-spacing: -.035em; }
h2 { font-size: var(--tl-text-h2); line-height: 1.05; letter-spacing: -.03em; }
h3 { font-size: var(--tl-text-h3); line-height: 1.15; letter-spacing: -.02em; }
h4 { font-size: var(--tl-text-h4); line-height: 1.25; letter-spacing: -.01em; }
p { max-width: var(--tl-measure); }
.tl-lead { font-size: var(--tl-text-body-lg); line-height: 1.5; }
.tl-small { font-size: var(--tl-text-small); font-weight: 500; line-height: 1.5; }
.tl-label { font-size: var(--tl-text-label); font-weight: 500; letter-spacing: .01em; line-height: 1.4; } /* copy in kleine letters schrijven, zie DESIGN.md 4.4 */
code, pre, kbd { font-family: var(--tl-font-mono); }

a {
  color: inherit;
  text-decoration: underline var(--tl-border-width);
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  transition: text-decoration-color var(--tl-duration-fast) var(--tl-ease),
              text-decoration-thickness var(--tl-duration-fast) var(--tl-ease);
}
a:hover { text-decoration-color: var(--tl-lime); text-decoration-thickness: 6px; }

:focus-visible {
  outline: 3px solid var(--tl-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--tl-lime); /* enige toegestane box-shadow */
}

/* ---------- Knoppen ---------- */
.tl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tl-space-2);
  min-height: 48px; padding: 0 var(--tl-space-5);
  font: 500 1rem/1 var(--tl-font-sans);
  border: var(--tl-border-width) solid var(--tl-ink);
  border-radius: var(--tl-radius-full);
  background: var(--tl-lime); color: var(--tl-ink);
  cursor: pointer; text-decoration: none;
  transition: background var(--tl-duration-fast) var(--tl-ease), color var(--tl-duration-fast) var(--tl-ease);
}
.tl-btn:hover { background: var(--tl-ink); color: var(--tl-lime); }
.tl-btn--secondary { background: transparent; color: var(--tl-text); border-color: var(--tl-border); }
.tl-btn--secondary:hover { background: var(--tl-text); color: var(--tl-bg); }
.tl-btn--compact { min-height: 40px; padding: 0 var(--tl-space-4); }
.tl-btn:disabled { background: var(--tl-ink-20); color: var(--tl-ink-60); border-color: var(--tl-ink-20); cursor: not-allowed; }

/* ---------- Markering (DESIGN.md 6.8) ---------- */
/* Eén doorlopend limoen blok achter 1–3 woorden. Breekt niet over regels. */
.tl-highlight {
  display: inline-block;      /* eigen blok: overlapt de regel erboven niet, ook bij krappe regelafstand */
  line-height: 1;
  padding: 0 .12em .06em;     /* onderkant: ruimte voor de staarten van j, g, p, y */
  background: var(--tl-lime);
  color: var(--tl-ink);
  white-space: nowrap;
}
/* Alleen op smalle schermen mag de tekst binnen het blok doorlopen naar een tweede regel; het blijft één vlak. */
@media (max-width: 639px) {
  .tl-highlight { white-space: normal; }
}

/* ---------- Kaart ---------- */
.tl-card {
  background: var(--tl-surface);
  border: var(--tl-border-width) solid var(--tl-border);
  border-radius: var(--tl-radius-md);
  padding: var(--tl-space-6);
}
a.tl-card, .tl-card--link { color: inherit; text-decoration: none;
  transition: background var(--tl-duration-fast) var(--tl-ease); }
a.tl-card:hover, .tl-card--link:hover { background: var(--tl-lime); color: var(--tl-ink); border-color: var(--tl-ink); }

/* ---------- Formulieren ---------- */
.tl-field { display: grid; gap: var(--tl-space-2); }
.tl-field label { font-size: var(--tl-text-small); font-weight: 500; }
.tl-input {
  min-height: 48px; padding: 0 var(--tl-space-4);
  font: 400 var(--tl-text-body) var(--tl-font-sans);
  color: var(--tl-ink); background: var(--tl-white);
  border: var(--tl-border-width) solid var(--tl-ink);
  border-radius: var(--tl-radius-sm);
}
.tl-input[aria-invalid="true"] { border-color: var(--tl-error); }
.tl-error-text { color: var(--tl-error); font-size: var(--tl-text-small); }

/* ---------- Tag ---------- */
.tl-tag {
  display: inline-flex; align-items: center; padding: var(--tl-space-1) var(--tl-space-3);
  font-size: var(--tl-text-label); font-weight: 500; letter-spacing: .01em;
  border: var(--tl-border-width) solid var(--tl-border); border-radius: var(--tl-radius-full);
}
.tl-tag--accent { background: var(--tl-ink); color: var(--tl-lime); border-color: var(--tl-ink); }

/* ---------- Layout ---------- */
.tl-container { max-width: var(--tl-content-max); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px) { .tl-container { padding-inline: 40px; } }
@media (min-width: 960px) { .tl-container { padding-inline: 64px; } }
.tl-section { padding-block: var(--tl-space-8); }
@media (min-width: 960px) { .tl-section { padding-block: var(--tl-space-9); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}