/* Just Design Loops — showcase-tokens, gebaseerd op de JDL-huisstijl "Loop Card" (BRAND.md, tokens/tokens.css).
   Laag 1 = primitives (kopie van de huisstijl), laag 2 = semantic. Componenten gebruiken ALLEEN laag 2.
   Twee inkten: Inkt en Tik. Alle hoofdstuk-accenten wijzen daarom naar Tik; variatie komt uit vlak en type. */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* ---------- Laag 1: primitives (uit de huisstijl) ---------- */
  --p-ink-900: #101820;   /* Inkt — Pantone Black 6 C */
  --p-ink-800: #1c2530;
  --p-ink-700: #2a3542;
  --p-grafiet-600: #4b5361;
  --p-steen-400: #8b929d;
  --p-lijn-200: #d9dde2;
  --p-papier-50: #f3f4f6; /* Papier — koel kaartwit */
  --p-wit: #ffffff;
  --p-tik-500: #e5421e;   /* Tik — Pantone 1665 C, alleen voor de stip en grafisch */
  --p-tik-700: #b3300f;   /* Tik Diep — tekst en knoppen op licht */
  --p-tik-300: #ff7a57;   /* Tik Licht — tekst en knoppen op donker */
  --p-groen-700: #1b7347; --p-groen-300: #5fd39a;
  --p-amber-800: #7a4e00; --p-amber-300: #f2c14e;

  /* 8pt-raster */
  --p-1: 4px; --p-2: 8px; --p-3: 12px; --p-4: 16px; --p-5: 24px; --p-6: 32px; --p-7: 48px; --p-8: 64px; --p-9: 96px; --p-10: 128px;
  --p-r-1: 8px; --p-r-2: 16px; --p-r-3: 24px; --p-r-rond: 999px;

  /* ---------- Laag 2: semantic (standaard = nacht) ---------- */
  --kleur-bg: var(--p-ink-900);
  --kleur-vlak: var(--p-ink-800);
  --kleur-vlak-2: var(--p-ink-700);
  --kleur-rand: var(--p-ink-700);
  --kleur-tekst: var(--p-papier-50);
  --kleur-tekst-zacht: var(--p-steen-400);
  --kleur-op-accent: var(--p-ink-900);
  --kleur-focus: var(--p-papier-50);
  --kleur-stip: var(--p-tik-500);
  --kleur-succes: var(--p-groen-300);
  --kleur-waarschuwing: var(--p-amber-300);

  --accent-1: var(--p-tik-300);
  --accent-2: var(--p-tik-300);
  --accent-3: var(--p-tik-300);
  --accent-4: var(--p-tik-300);
  --accent-5: var(--p-tik-300);
  --accent-6: var(--p-tik-300);
  --accent: var(--accent-1);

  --ruimte-xs: var(--p-2);
  --ruimte-s: var(--p-4);
  --ruimte-m: var(--p-5);
  --ruimte-l: var(--p-7);
  --ruimte-xl: var(--p-9);
  --ruimte-sectie: clamp(var(--p-9), 14vw, 200px);
  --rand-gutter: clamp(var(--p-4), 4vw, var(--p-8));
  --radius-s: var(--p-r-1);
  --radius-m: var(--p-r-2);
  --radius-l: var(--p-r-3);
  --radius-rond: var(--p-r-rond);
  --raak: 48px; /* minimaal raakvlak */

  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-tekst: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --tekst-mega: clamp(3rem, 11vw, 10.5rem);
  --tekst-xl: clamp(2.25rem, 6vw, 5rem);
  --tekst-l: clamp(1.5rem, 3vw, 2.25rem);
  --tekst-m: 1.125rem;
  --tekst-s: 1rem;
  --tekst-xs: 0.8125rem;

  /* motion: één easing voor binnenkomst, één voor veren */
  --duur-micro: 160ms;
  --duur-in: 240ms;
  --duur-uit: 170ms;
  --duur-onthul: 420ms; /* scroll-onthulling: bewust langer dan enter (240 ms) uit de huisstijl, zie PLAN.md */
  --ease-uit: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-veer: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: dark;
}

/* Dag: alleen de semantische laag wisselt; componenten merken er niets van. */
:root[data-thema="dag"] {
  --kleur-bg: var(--p-papier-50);
  --kleur-vlak: var(--p-wit);
  --kleur-vlak-2: #e8eaed;
  --kleur-rand: var(--p-lijn-200);
  --kleur-tekst: var(--p-ink-900);
  --kleur-tekst-zacht: var(--p-grafiet-600);
  --kleur-op-accent: var(--p-wit);
  --kleur-focus: var(--p-ink-900);
  --kleur-succes: var(--p-groen-700);
  --kleur-waarschuwing: var(--p-amber-800);
  --accent-1: var(--p-tik-700);
  --accent-2: var(--p-tik-700);
  --accent-3: var(--p-tik-700);
  --accent-4: var(--p-tik-700);
  --accent-5: var(--p-tik-700);
  --accent-6: var(--p-tik-700);
  color-scheme: light;
}