/* Kolkworks design tokens
 * Vastgesteld 2026-09-02 (Q-013 A). Eén bron voor kleur, typografie, ruimte, radius en schaduw.
 * Gebruik altijd een token, nooit een losse hexwaarde: dat houdt vijf producten op één lijn.
 * Donker thema volgt het systeem (prefers-color-scheme) en kan met data-theme worden overruled.
 */

:root {
  /* Kleur: licht thema (de standaard) */
  --kw-paper:        #FAFAF7;  /* paginagrond */
  --kw-surface:      #FFFFFF;  /* kaarten, tabellen, velden */
  --kw-raised:       #F4F3EE;  /* subtiel verhoogd vlak, tabelkop */
  --kw-ink:          #1A1D21;  /* hoofdtekst */
  --kw-muted:        #5A616B;  /* bijschrift, secundaire tekst */
  --kw-faint:        #858C96;  /* labels, meta */
  --kw-line:         #E3E1DB;  /* randen */
  --kw-line-soft:    #EDEBE5;  /* scheiding binnen een vlak */

  --kw-accent:       #2F6DB3;  /* primaire actie en focus */
  --kw-accent-hover: #255A96;
  --kw-accent-soft:  #E9F0F8;  /* accentvlak achter tekst */
  --kw-accent-ink:   #1F4E85;  /* accentkleurige tekst op licht */

  /* Status: altijd samen met tekst of icoon, nooit kleur alleen */
  --kw-ok:           #2E7D4F;  --kw-ok-soft:    #E7F2EB;
  --kw-warn:         #B26A00;  --kw-warn-soft:  #FBF0DE;
  --kw-error:        #B3362F;  --kw-error-soft: #FAEAE8;

  /* Typografie */
  --kw-font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kw-font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --kw-font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --kw-text-xs:      12px;
  --kw-text-sm:      13.5px;
  --kw-text-base:    15px;
  --kw-text-lg:      18px;
  --kw-text-xl:      22px;
  --kw-text-2xl:     28px;
  --kw-text-3xl:     36px;
  --kw-leading:      1.55;
  --kw-leading-tight:1.2;
  --kw-measure:      65ch;     /* leesbare regellengte voor lopende tekst */

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

  /* Vorm */
  --kw-radius-sm:    4px;
  --kw-radius:       8px;
  --kw-radius-lg:    12px;
  --kw-radius-pill:  999px;

  /* Diepte: spaarzaam, alleen waar iets echt boven de pagina hangt */
  --kw-shadow-sm:    0 1px 2px rgba(26, 29, 33, .06);
  --kw-shadow:       0 1px 2px rgba(26, 29, 33, .05), 0 8px 24px -18px rgba(26, 29, 33, .35);
  --kw-shadow-lg:    0 2px 4px rgba(26, 29, 33, .06), 0 16px 40px -24px rgba(26, 29, 33, .45);

  --kw-focus:        0 0 0 3px var(--kw-accent-soft);
  --kw-maxwidth:     1100px;
}

/* Donker thema: alleen de kleurtokens worden opnieuw gezet, nooit componenten.
   De guard :not([data-theme="light"]) zorgt dat een expliciete lichte keuze wint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kw-paper:        #14171B;
    --kw-surface:      #1B1F25;
    --kw-raised:       #20252C;
    --kw-ink:          #ECEEF0;
    --kw-muted:        #A3ABB5;
    --kw-faint:        #7C848E;
    --kw-line:         #2B313A;
    --kw-line-soft:    #242A32;

    --kw-accent:       #79ACE4;
    --kw-accent-hover: #9AC3EE;
    --kw-accent-soft:  #1A2836;
    --kw-accent-ink:   #A8C9EE;

    --kw-ok:           #6FB98B;  --kw-ok-soft:    #16261D;
    --kw-warn:         #DCA33F;  --kw-warn-soft:  #2A2113;
    --kw-error:        #E7847A;  --kw-error-soft: #2E1A18;

    --kw-shadow-sm:    0 1px 2px rgba(0, 0, 0, .35);
    --kw-shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -20px rgba(0, 0, 0, .9);
    --kw-shadow-lg:    0 2px 6px rgba(0, 0, 0, .45), 0 18px 44px -26px rgba(0, 0, 0, .95);
    --kw-focus:        0 0 0 3px rgba(121, 172, 228, .28);
  }
}

:root[data-theme="dark"] {
  --kw-paper:        #14171B;
  --kw-surface:      #1B1F25;
  --kw-raised:       #20252C;
  --kw-ink:          #ECEEF0;
  --kw-muted:        #A3ABB5;
  --kw-faint:        #7C848E;
  --kw-line:         #2B313A;
  --kw-line-soft:    #242A32;

  --kw-accent:       #79ACE4;
  --kw-accent-hover: #9AC3EE;
  --kw-accent-soft:  #1A2836;
  --kw-accent-ink:   #A8C9EE;

  --kw-ok:           #6FB98B;  --kw-ok-soft:    #16261D;
  --kw-warn:         #DCA33F;  --kw-warn-soft:  #2A2113;
  --kw-error:        #E7847A;  --kw-error-soft: #2E1A18;

  --kw-shadow-sm:    0 1px 2px rgba(0, 0, 0, .35);
  --kw-shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -20px rgba(0, 0, 0, .9);
  --kw-shadow-lg:    0 2px 6px rgba(0, 0, 0, .45), 0 18px 44px -26px rgba(0, 0, 0, .95);
  --kw-focus:        0 0 0 3px rgba(121, 172, 228, .28);
}