/* ============================================================
   GEGENEREERD — niet met de hand bewerken.
   Bron: config/theme.tokens.json · generator: scripts/build-tokens.mjs
   Thema: keuringssticker (Keuringsinbox, S3)

   Drie lagen (brand/00-design-systeem-contract.md §1):
     laag 1 primitieven  — ruwe schalen, alleen hier staan hexwaarden
     laag 2 semantisch   — wat een primitief betekent; componenten raken ALLEEN deze
     laag 3 component    — maten die een component nodig heeft

   Elk paar uit de contrastlijst is bij de build gevalideerd:
   43 paren op WCAG AA >= 4.5:1, 17 paren op >= 3:1.
   ============================================================ */

:root {
  /* laag 1 — primitieven */
  --vinyl-000: #ffffff;
  --vinyl-050: #e8e9e7;
  --vinyl-100: #dcdedb;
  --vinyl-200: #c3c6c2;
  --vinyl-300: #747874;
  --vinyl-400: #9aa09a;
  --ink-600: #555954;
  --ink-700: #3a3d39;
  --ink-900: #141414;
  --ink-950: #0a0a0a;
  --signaal-geel: #ffd100;
  --signaal-oranje: #f26a1b;
  --signaal-kobalt: #2249c8;
  --signaal-violet: #6b2fa0;
  --goed-ink: #196933;
  --goed-wash: #e7f0e8;
  --afgekeurd-ink: #c4161c;
  --afgekeurd-wash: #fbe9e9;
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.375rem;
  --space-4: 0.5rem;
  --space-5: 0.75rem;
  --space-6: 1rem;
  --space-7: 1.5rem;
  --space-8: 2rem;
  --space-9: 3rem;
  --space-10: 4.5rem;
  --fs-2xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.375rem;
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
  --fs-3xl: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.5;
  --radius-sticker: 10px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;
  --rule-hairline: 1px;
  --rule-strong: 2px;
  --rule-die: 3px;
  --shadow-0: none;
  --shadow-applied: 0 1px 0 rgb(10 10 10 / 0.18), 0 2px 5px rgb(10 10 10 / 0.10);
  --shadow-layer: 0 12px 32px rgb(10 10 10 / 0.22), 0 2px 6px rgb(10 10 10 / 0.10);
  --ease-punch: cubic-bezier(0.2, 0, 0, 1);
  --dur-punch: 90ms;
  --dur-state: 120ms;
  --font-display-stack: "Archivo Narrow", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui-stack: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* laag 2 — semantisch (merkneutrale namen, vast schema) */
  --surface-canvas: var(--vinyl-050);
  --surface-card: var(--vinyl-000);
  --surface-tint: var(--vinyl-100);
  --surface-inverse: var(--ink-900);
  --surface-inverse-deep: var(--ink-950);
  --surface-sticker: var(--signaal-geel);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-600);
  --icon-decorative: var(--vinyl-300);
  --text-on-inverse: var(--vinyl-050);
  --text-muted-on-inverse: var(--vinyl-400);
  --text-on-sticker: var(--ink-900);
  --text-on-action: var(--vinyl-000);
  --border-hairline: var(--vinyl-200);
  --border-strong: var(--vinyl-300);
  --border-die: var(--ink-900);
  --border-inverse: var(--ink-700);
  --border-strong-inverse: var(--vinyl-400);
  --color-action: var(--ink-900);
  --color-action-hover: var(--ink-950);
  --color-action-wash: var(--vinyl-100);
  --color-action-on-inverse: var(--signaal-geel);
  --text-on-action-inverse: var(--ink-900);
  --status-ok-ink: var(--goed-ink);
  --status-ok-wash: var(--goed-wash);
  --status-warn-ink: var(--ink-900);
  --status-warn-wash: var(--signaal-geel);
  --status-warn-line: var(--ink-900);
  --status-alert-ink: var(--afgekeurd-ink);
  --status-alert-wash: var(--afgekeurd-wash);
  --ring: var(--ink-900);
  --ring-on-inverse: var(--signaal-geel);
  --ring-on-sticker: var(--ink-900);
  --color-brand-mark: var(--ink-900);
  --color-brand-accent: var(--signaal-geel);
  --color-brand-accent-on-inverse: var(--signaal-geel);
  --categorie-brand: var(--signaal-geel);
  --categorie-hoogte: var(--signaal-oranje);
  --categorie-arbo: var(--signaal-kobalt);
  --categorie-opleiding: var(--signaal-violet);
  --font-display: var(--font-display-stack);
  --font-body: var(--font-ui-stack);
  --motion-punch: var(--dur-punch);
  --motion-state: var(--dur-state);
  --motion-ease: var(--ease-punch);
  --elevation-resting: var(--shadow-0);
  --elevation-applied: var(--shadow-applied);
  --elevation-layer: var(--shadow-layer);

  /* laag 3 — component */
  --target-min: 44px;
  --btn-radius: var(--radius-md);
  --card-radius: var(--radius-sticker);
  --input-radius: var(--radius-sm);
  --badge-radius: var(--radius-sm);
  --container-max: 78rem;
  --container-narrow: 44rem;
  --row-min-height: 44px;
  --rule-width: var(--rule-hairline);
  --die-width: var(--rule-die);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* overgangsaliassen naar de job-stream-namen — zie ADR-011-voorstel */
  --surface-page: var(--surface-canvas);
  --border: var(--border-hairline);
  --color-accent: var(--color-action);
  --color-accent-hover: var(--color-action-hover);
  --color-accent-tint: var(--color-action-wash);
  --color-success: var(--status-ok-ink);
  --surface-success: var(--status-ok-wash);
  --color-danger: var(--status-alert-ink);
  --surface-danger: var(--status-alert-wash);
  --color-warn: var(--status-warn-ink);
  --surface-warn: var(--status-warn-wash);
  --border-warn: var(--status-warn-line);
  --text-on-accent: var(--text-on-action);
}

/* Beweging is optioneel gedrag, nooit betekenis. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-state: 1ms;
    --motion-layer: 1ms;
  }
}

/* Zelf gehost, latin-subset, preloaded in de <head>. Geen externe fontbron.
   Eén familie in twee breedtes: de smalle voor wat op een sticker geperst
   staat, de normale voor alles wat gelezen wordt. */
@font-face {
  font-family: 'Archivo Narrow';
  src: url('./fonts/archivo-narrow-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('./fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}