/* IMPORTCHECKER — design tokens. Bron: docs/IMPORTCHECKER_Design_Guide_v1.md §2. Bindend. */

:root {
  /* Huisstijl v2 — afgeleid uit het logo-asset, getoetst op WCAG AA.
     Contrast t.o.v. het aangegeven gebruik staat achter elke waarde. */
  --ic-ink:   #0C243C;  /* tekst op papier            14.5:1 */
  --ic-diep:  #183C54;  /* vlak, witte tekst erop     11.6:1 */
  --ic-slate: #38566B;  /* secundaire tekst            7.1:1 */
  --ic-check: #48A860;  /* MERKGROEN - alleen grafisch (vink, accentlijn).
                           Haalt 2,98:1 met wit: NOOIT als vlak onder tekst. */
  --ic-actie: #2E8744;  /* ACTIEGROEN - knoppen, wit erop  4.5:1 */
  --ic-paper: #F4F6F5;  /* achtergrond */
  --ic-line:  #D8E4E4;  /* hairlines, veldranden */
  --ic-alert: #C0392B;  /* validatiefouten */

  --font-display: 'Archivo', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --size-plate: 3.5rem;
  --lh-plate: 1.0;
  --size-h1: 2rem;
  --lh-h1: 1.15;
  --size-h2: 1.375rem;
  --lh-h2: 1.25;
  --size-body: 1rem;
  --lh-body: 1.55;
  --size-label: 0.875rem;
  --lh-label: 1.3;
  --size-trace: 0.8125rem;
  --lh-trace: 1.6;
  --size-disclaimer: 0.8125rem;
  --lh-disclaimer: 1.5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ic-paper);
  color: var(--ic-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

.text-plate {
  font-family: var(--font-display-condensed);
  font-weight: 700;
  font-size: var(--size-plate);
  line-height: var(--lh-plate);
  letter-spacing: 0.02em;
  color: var(--ic-ink);
}

h1, .text-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  margin: 0;
}

h2, .text-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  margin: 0;
}

.text-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-label);
  line-height: var(--lh-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ic-slate);
}

.text-trace {
  font-family: var(--font-mono);
  font-size: var(--size-trace);
  line-height: var(--lh-trace);
  color: var(--ic-slate);
}

.text-disclaimer {
  font-family: var(--font-body);
  font-size: var(--size-disclaimer);
  line-height: var(--lh-disclaimer);
  color: var(--ic-slate);
}

@media (prefers-reduced-motion: no-preference) {
  .plate-enter { animation: plate-stamp 180ms ease-out both; }
  .trace-line  { animation: trace-print 220ms ease-out both; }
  @keyframes plate-stamp {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  @keyframes trace-print {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .plate-enter, .trace-line { animation: none !important; }
}

/* Accessibility classes */
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--ic-alert) !important;
}