/*
 * Design tokens — STIJLGIDS §1, taken over literally.
 *
 * Light is the base on bare :root. Dark is defined twice with the same body: once behind
 * prefers-color-scheme for the default "system" setting, once behind [data-theme="dark"] so the
 * toggle in the side navigation wins in both directions. No colour is ever defined only inside a
 * media query.
 */

:root {
  /* Zo volgen ook de native besturingselementen (scrollbars, datumkiezer) het thema. */
  color-scheme: light;

  /* basis */
  --bg: #F6F3EE;            /* pagina-achtergrond */
  --surface: #FFFFFF;       /* kaarten, tabellen, velden */
  --surface-2: #EFEBE4;     /* balk-track, uitgeschakeld, subtiele vlakken */
  --surface-hover: #FBF9F6; /* rij-hover, groepskoppen in tabellen */
  --surface-selected: #FDF7F4; /* geselecteerde/gefocuste rij */
  --border: #E3DDD3;        /* kaartranden, scheidingslijnen */
  --border-soft: #EFEBE4;   /* lijnen tussen tabelrijen */
  --border-strong: #CFC7BB; /* invoervelden, secundaire knoppen */
  --ink: #2A2521;           /* primaire tekst */
  --ink-2: #5E574F;         /* secundaire tekst */
  --ink-3: #8B837A;         /* labels, hulptekst, placeholders (AA op wit én --bg) */
  --ink-inverse: #FFFFFF;

  /* accent */
  --accent: #B5603F;        /* primaire knop, actieve nav, badge */
  --accent-hover: #96482B;
  --accent-tint: #F4E4DC;   /* actieve nav-achtergrond, INRICHTING-tint */
  --accent-on: #8E4629;     /* tekst op --accent-tint */
  --olive: #6B7748;         /* gerecupereerd, toggles aan, inkomstenbalk */
  --olive-tint: #EBEEDF;    /* VOEDING-tint, "geregeld" */
  --olive-on: #55622F;

  /* semantisch */
  --pos: #3B7550;  --pos-tint: #E3EEE5;  --pos-on: #2F5F41;
  --neg: #A6463B;  --neg-tint: #F5E2DF;
  --warn: #A8721D; --warn-tint: #F7EBD3; --warn-on: #7E5A15;

  /* hoofdcategorie-tinten: achtergrond / tekst */
  --cat-voeding-bg: #EBEEDF;     --cat-voeding-fg: #55622F;
  --cat-inrichting-bg: #F4E4DC;  --cat-inrichting-fg: #8E4629;
  --cat-onderhoud-bg: #F5EAD3;   --cat-onderhoud-fg: #7E5A15;
  --cat-verkoop-bg: #E3EEE5;     --cat-verkoop-fg: #2F5F41;
  --cat-budget-bg: #EAE4EE;      --cat-budget-fg: #5B4A6B;
  --cat-abonnement-bg: #E2EAEC;  --cat-abonnement-fg: #3E5D66;
  --cat-educatief-bg: #DFEBE9;   --cat-educatief-fg: #2F5F5A;
  --cat-bank-bg: #ECE9E3;        --cat-bank-fg: #5E574F;
  --cat-overboeking-bg: #ECE9E3; --cat-overboeking-fg: #5E574F; /* + border: 1px dashed var(--border-strong) */

  /* arcering voor "in beweging"-segmenten van de potbalk */
  --hatch-olive: repeating-linear-gradient(135deg, #6B7748 0 4px, #A9B285 4px 8px);
  --hatch-terra: repeating-linear-gradient(135deg, #B5603F 0 4px, #E3B9A6 4px 8px);

  --focus: 0 0 0 3px rgba(181, 96, 63, .35);
  --shadow-float: 0 4px 16px rgba(42, 37, 33, .14);   /* enkel dropdown, toast, dialoog */

  /* typografie — §1.3 */
  --font: 'IBM Plex Sans', system-ui, sans-serif;
  --fs-xs: 12px;  /* labels, chips, pillen, hulptekst */
  --fs-sm: 13px;  /* tabelkoppen, mededelingen, meta */
  --fs-md: 14px;  /* body, tabelcellen, knoppen, velden */
  --fs-lg: 16px;  /* kaarttitels, tegenpartij in detail */
  --fs-h2: 20px;  /* sectietitels (600) */
  --fs-h1: 28px;  /* paginatitel (600) */
  --fs-display: 40px; /* enkel het grote saldo op het dashboard (600) */
  --lh-tight: 1.2; --lh-body: 1.45;

  /* spacing, radius, hoogtes — §1.5 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 4px;   /* thumbnails in rijen, kleine badges */
  --r-md: 6px;   /* knoppen, velden, chips, dropdown */
  --r-lg: 10px;  /* kaarten, tabellen */
  --r-xl: 12px;  /* mobiele kaarten en knoppen */
  --r-pill: 999px;
  --hit: 40px;       /* min. klikdoel (desktop) */
  --hit-mobile: 48px;
  --row: 48px;       /* tabelrij */
  --row-head: 36px;  /* tabelkop */
  --nav-w: 232px; --nav-w-collapsed: 64px;
}

/* Donkere modus — §1.2. Standaard volgt het systeem; de toggle overschrijft. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1F1C19; --surface: #2A2521; --surface-2: #332E29;
    --surface-hover: #302B26; --surface-selected: #3A2C25;
    --border: #3E3832; --border-soft: #332E29; --border-strong: #554D45;
    --ink: #F0EBE3; --ink-2: #BDB4A8; --ink-3: #8B837A; --ink-inverse: #1F1C19;
    --accent: #D07A57; --accent-hover: #E08F6E; --accent-tint: #3F2A21; --accent-on: #E8A98E;
    --olive: #97A36C; --olive-tint: #2C3024; --olive-on: #C3CD9C;
    --pos: #7FB894; --pos-tint: #24352A; --pos-on: #9FCBAE;
    --neg: #E08A7E; --neg-tint: #3E2624;
    --warn: #D9A24A; --warn-tint: #3B3020; --warn-on: #E0C078;
    --cat-voeding-bg: #2C3024;    --cat-voeding-fg: #C3CD9C;
    --cat-inrichting-bg: #3F2A21; --cat-inrichting-fg: #E8A98E;
    --cat-onderhoud-bg: #3B3020;  --cat-onderhoud-fg: #E0C078;
    --cat-verkoop-bg: #24352A;    --cat-verkoop-fg: #9FCBAE;
    --cat-budget-bg: #332B3A;     --cat-budget-fg: #C9B8DA;
    --cat-abonnement-bg: #26333A; --cat-abonnement-fg: #A9C5CF;
    --cat-educatief-bg: #24363A;  --cat-educatief-fg: #A3C9C4;
    --cat-bank-bg: #332E29;       --cat-bank-fg: #BDB4A8;
    --cat-overboeking-bg: #332E29;--cat-overboeking-fg: #BDB4A8;
    --hatch-olive: repeating-linear-gradient(135deg, #97A36C 0 4px, #4E5638 4px 8px);
    --hatch-terra: repeating-linear-gradient(135deg, #D07A57 0 4px, #6B3F2E 4px 8px);
    --focus: 0 0 0 3px rgba(208, 122, 87, .45);
    --shadow-float: 0 4px 16px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1F1C19; --surface: #2A2521; --surface-2: #332E29;
  --surface-hover: #302B26; --surface-selected: #3A2C25;
  --border: #3E3832; --border-soft: #332E29; --border-strong: #554D45;
  --ink: #F0EBE3; --ink-2: #BDB4A8; --ink-3: #8B837A; --ink-inverse: #1F1C19;
  --accent: #D07A57; --accent-hover: #E08F6E; --accent-tint: #3F2A21; --accent-on: #E8A98E;
  --olive: #97A36C; --olive-tint: #2C3024; --olive-on: #C3CD9C;
  --pos: #7FB894; --pos-tint: #24352A; --pos-on: #9FCBAE;
  --neg: #E08A7E; --neg-tint: #3E2624;
  --warn: #D9A24A; --warn-tint: #3B3020; --warn-on: #E0C078;
  --cat-voeding-bg: #2C3024;    --cat-voeding-fg: #C3CD9C;
  --cat-inrichting-bg: #3F2A21; --cat-inrichting-fg: #E8A98E;
  --cat-onderhoud-bg: #3B3020;  --cat-onderhoud-fg: #E0C078;
  --cat-verkoop-bg: #24352A;    --cat-verkoop-fg: #9FCBAE;
  --cat-budget-bg: #332B3A;     --cat-budget-fg: #C9B8DA;
  --cat-abonnement-bg: #26333A; --cat-abonnement-fg: #A9C5CF;
  --cat-educatief-bg: #24363A;  --cat-educatief-fg: #A3C9C4;
  --cat-bank-bg: #332E29;       --cat-bank-fg: #BDB4A8;
  --cat-overboeking-bg: #332E29;--cat-overboeking-fg: #BDB4A8;
  --hatch-olive: repeating-linear-gradient(135deg, #97A36C 0 4px, #4E5638 4px 8px);
  --hatch-terra: repeating-linear-gradient(135deg, #D07A57 0 4px, #6B3F2E 4px 8px);
  --focus: 0 0 0 3px rgba(208, 122, 87, .45);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, .45);
}