/* =====================================================================
   Design tokens - the single source of every colour, size and timing in
   the product. Adopted from the phase-2 proposal (24 September 2026).

   Three layers:
     1. primitives  - raw values. Never used directly in a component.
     2. semantic    - meaning ("text", "border", "action"). Switches per theme.
     3. component   - per component (button, input, card). Refers to semantic.

   Themes: dark is the base in :root (the page still renders correctly if
   JavaScript never runs), light via :root[data-theme="light"]. Every text
   colour clears 4.5:1 on every background it sits on; input borders and the
   focus ring clear 3:1. Change a colour here, re-check it in both themes.

   Loaded BEFORE style.css. style.css maps its older variable names (--panel,
   --muted, --accent ...) onto these, so existing components follow along.
   ===================================================================== */

/* Self-hosted: the CSP allows no external stylesheets or fonts.
   Plus Jakarta Sans, SIL Open Font License 1.1 - see /fonts/PlusJakartaSans-OFL.txt */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- 1. primitives */
:root {
  /* Neutraal, licht koel. */
  --gray-0:   #ffffff;
  --gray-25:  #f6f7f9;
  --gray-50:  #eef1f5;
  --gray-100: #dde2e8;
  --gray-300: #717d90;
  --gray-500: #5b6677;
  --gray-600: #475569;
  --gray-900: #0f172a;

  --ink-950: #0b0f15;
  --ink-900: #121821;
  --ink-850: #1a222d;
  --ink-800: #273241;
  --ink-700: #3a4658;
  --ink-500: #64728a;
  --ink-300: #909cad;
  --ink-200: #aab5c3;
  --ink-50:  #e8edf3;

  /* Eén actiekleur. */
  --blue-50:  #e0f0fa;
  --blue-600: #0369a1;
  --blue-700: #075985;
  --blue-900: #12304a;
  --blue-300: #60a5e8;
  --blue-200: #7db6ee;
  --blue-ink: #07111c;

  /* Status: altijd samen met een woord, nooit kleur alleen. */
  --green-700: #15703f;  --green-300: #4cc78e;
  --amber-700: #935f00;  --amber-300: #e3b341;
  --red-700:   #b42318;  --red-300:   #f2837b;

  /* Typografie: één familie, zelf gehost (woff2), met systeemletter als terugval. */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Schaal van zeven. Niets kleiner dan 12 px. */
  --text-xs:   12px;   /* labels in hoofdletters, voetnoten */
  --text-sm:   14px;   /* hulptekst, metadata, tabellen */
  --text-md:   16px;   /* lopende tekst, knoppen, invoer */
  --text-lg:   18px;   /* kaarttitels, schermtitels in de app */
  --text-xl:   22px;   /* sectietitels */
  --text-2xl:  28px;   /* paginatitels */
  --text-3xl:  40px;   /* homepage-hero; op mobiel 30 px */

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-body:  1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Ruimte: stappen van 4. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 6px;    /* knoppen, invoer, badges */
  --radius-md: 10px;   /* kaarten, meldingen */
  --radius-lg: 14px;   /* grote panelen, dialogen */
  --radius-full: 999px;

  /* Beweging: kort en alleen met betekenis. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 120ms;
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-drawer: 250ms;
}

/* ---------------------------------------------------------------- 2. semantic - donker (basis) */
:root {
  color-scheme: dark;

  --bg:          var(--ink-950);   /* pagina */
  --surface:     var(--ink-900);   /* kaarten, panelen */
  --surface-2:   var(--ink-850);   /* zijbalk, invoer, verdiepte vlakken */
  --border:      var(--ink-800);   /* scheidingslijnen, kaartranden */
  --border-input:var(--ink-500);   /* rand van invoervelden: min. 3:1 */

  --text:        var(--ink-50);
  --text-2:      var(--ink-200);   /* toelichting */
  --text-3:      var(--ink-300);   /* metadata, datums - haalt 4,5:1 */

  --action:          var(--blue-300);
  --action-hover:    var(--blue-200);
  --on-action:       var(--blue-ink);   /* donkere tekst op lichtblauw: 7,3:1 */
  --action-soft:     var(--blue-900);
  --action-soft-text:var(--blue-200);
  --link:            var(--blue-200);
  --focus:           var(--blue-200);

  --ok:     var(--green-300);
  --warn:   var(--amber-300);
  --danger: var(--red-300);

  --shadow-sm: none;               /* in donker werken randen, geen schaduw */
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
  --paper-backdrop: var(--ink-950);
}

/* ---------------------------------------------------------------- 2. semantic - licht */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          var(--gray-25);
  --surface:     var(--gray-0);
  --surface-2:   var(--gray-50);
  --border:      var(--gray-100);
  --border-input:var(--gray-300);

  --text:        var(--gray-900);
  --text-2:      var(--gray-600);
  --text-3:      var(--gray-500);

  --action:          var(--blue-600);
  --action-hover:    var(--blue-700);
  --on-action:       var(--gray-0);
  --action-soft:     var(--blue-50);
  --action-soft-text:var(--blue-700);
  --link:            var(--blue-600);
  --focus:           var(--blue-600);

  --ok:     var(--green-700);
  --warn:   var(--amber-700);
  --danger: var(--red-700);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px rgba(15, 23, 42, .08);
  --paper-backdrop: var(--gray-50);   /* was vast zwart - bevinding H4 */
}

/* ---------------------------------------------------------------- 3. component */
:root {
  --btn-height: 40px;          /* 44 px op aanraakschermen, zie hieronder */
  --btn-radius: var(--radius-sm);
  --btn-font: var(--weight-semi) var(--text-sm)/1 var(--font-sans);
  --btn-press-scale: .97;

  --btn-primary-bg: var(--action);
  --btn-primary-bg-hover: var(--action-hover);
  --btn-primary-text: var(--on-action);

  --btn-secondary-bg: var(--surface);
  --btn-secondary-border: var(--border-input);
  --btn-secondary-text: var(--text);

  --btn-danger-text: var(--danger);
  --btn-danger-border: var(--danger);

  --input-bg: var(--surface-2);
  --input-border: var(--border-input);
  --input-radius: var(--radius-sm);
  --input-height: 44px;

  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);

  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;
}

@media (pointer: coarse) {
  :root { --btn-height: 44px; }
}