/* Alswe brand tokens — direction A "Keukentafel", second pass (26 Sep 2026)
   Livelier than the first pass: warmer paper, violet-black ink, koraal and iris for the
   two partners, zon for the one number that matters, munt for "all good", plus tints
   for icon tiles and section backgrounds.
   Contrast ratios are WCAG 2 against papier of the same theme.
   Rules: the interface is ink and paper; colour belongs to people (koraal = partner A,
   iris = partner B), scenarios (1 koraal, 2 iris, 3 zon, baseline inkt dashed), icons
   and illustrations. One zon highlight per screen. No red/green scorekeeping on money. */

:root {
  color-scheme: light;

  /* ground and surfaces */
  --papier:        #FAF6F1;   /* page ground */
  --vlak:          #FFFFFF;   /* cards, inputs, tables */
  --vlak-2:        #F0EAE2;   /* table headers, segmented controls, secondary fills */
  --lijn:          #E0D8CE;   /* borders, rules, chart grid */

  /* text */
  --inkt:          #221F2B;   /* body, headings, primary buttons, baseline series   15.0:1 */
  --inkt-2:        #575264;   /* secondary text                                     7.0:1 */
  --gedempt:       #736D7C;   /* captions, labels, axis text; never below 13px      4.6:1 */

  /* people and scenarios */
  --koraal:        #E2542F;   /* partner A, scenario 1: fills, lines, avatars       3.5:1 (fill) */
  --koraal-tekst:  #B83A1B;   /* koraal as text                                     5.3:1 */
  --iris:          #6C4FD6;   /* partner B, scenario 2: fills, lines, avatars       5.2:1 */
  --iris-tekst:    #5A3FC0;   /* iris as text and links                             6.7:1 */
  --zon:           #F5BE3A;   /* highlight fill behind the decisive number, scenario 3 */
  --zon-tekst:     #8A6410;   /* zon as text                                        5.0:1 */
  --op-zon:        #221F2B;   /* text on a zon fill                                 9.5:1 */
  --munt:          #1E9A6C;   /* "all good": saved, verified, available (fill)      3.3:1 (fill) */
  --munt-tekst:    #177A55;   /* munt as text                                       4.9:1 */

  /* system states */
  --let-op:        #9A5E00;   /* warnings: estimate, rule changes, buffer below norm 4.9:1 */
  --framboos:      #B0154F;   /* validation errors only, with icon and sentence     6.4:1 */

  /* tints: icon tiles, section backgrounds, soft emphasis */
  --koraal-tint:   #FCE3DA;
  --iris-tint:     #E8E2FA;
  --zon-tint:      #FDEFC6;
  --munt-tint:     #D9F2E6;
  --let-op-tint:   #F8E9CF;

  /* interface */
  --knop:          var(--inkt);
  --knop-tekst:    var(--papier);
  --link:          var(--iris-tekst);

  /* chart series */
  --serie-nu:      var(--inkt);   /* dashed */
  --serie-1:       var(--koraal);
  --serie-2:       var(--iris);
  --serie-3:       var(--zon);

  /* type */
  --font-display:  "Bricolage Grotesque", "Instrument Sans", Georgia, serif;
  --font-body:     "Instrument Sans", "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:     "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape */
  --radius-card:   16px;
  --radius-input:  10px;
  --radius-pill:   999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier:        #16141C;
    --vlak:          #1F1C27;
    --vlak-2:        #2A2634;
    --lijn:          #3A3547;
    --inkt:          #F2EEF7;   /* 15.9:1 */
    --inkt-2:        #C6C0D2;   /* 10.3:1 */
    --gedempt:       #948DA3;   /*  5.7:1 */
    --koraal:        #FF8A66;   /*  7.9:1 */
    --koraal-tekst:  #FF8A66;
    --iris:          #B3A0F5;   /*  8.1:1 */
    --iris-tekst:    #B3A0F5;
    --zon:           #FFD166;   /* 12.7:1 */
    --zon-tekst:     #FFD166;
    --op-zon:        #16141C;   /* 12.7:1 on zon */
    --munt:          #5FD3A3;   /*  9.9:1 */
    --munt-tekst:    #5FD3A3;
    --let-op:        #F0B85A;   /* 10.2:1 */
    --framboos:      #FF7BAB;   /*  7.5:1 */
    --koraal-tint:   rgba(255, 138, 102, .16);
    --iris-tint:     rgba(179, 160, 245, .16);
    --zon-tint:      rgba(255, 209, 102, .16);
    --munt-tint:     rgba(95, 211, 163, .16);
    --let-op-tint:   rgba(240, 184, 90, .16);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papier:        #16141C;
  --vlak:          #1F1C27;
  --vlak-2:        #2A2634;
  --lijn:          #3A3547;
  --inkt:          #F2EEF7;
  --inkt-2:        #C6C0D2;
  --gedempt:       #948DA3;
  --koraal:        #FF8A66;
  --koraal-tekst:  #FF8A66;
  --iris:          #B3A0F5;
  --iris-tekst:    #B3A0F5;
  --zon:           #FFD166;
  --zon-tekst:     #FFD166;
  --op-zon:        #16141C;
  --munt:          #5FD3A3;
  --munt-tekst:    #5FD3A3;
  --let-op:        #F0B85A;
  --framboos:      #FF7BAB;
  --koraal-tint:   rgba(255, 138, 102, .16);
  --iris-tint:     rgba(179, 160, 245, .16);
  --zon-tint:      rgba(255, 209, 102, .16);
  --munt-tint:     rgba(95, 211, 163, .16);
  --let-op-tint:   rgba(240, 184, 90, .16);
}

/* every euro amount lines up */
table, .num, .bedrag { font-variant-numeric: tabular-nums; }