/* ==========================================================================
   tokens.css — the single source of truth for the design system
   --------------------------------------------------------------------------
   Change a value here and it propagates everywhere. Nothing below this file
   should contain a raw hex code.

   The palette is taken from the Vleetle mascot: his leaf green, the deep
   green-teal of his outline (#122b2d) and his cream screen. The neutrals
   carry a faint green cast so greys sit in the same family as the brand
   instead of reading cold beside it.

   Structure:
     1. Primitives  — the raw ramps (leaf, stone, chart hues, status)
     2. Semantics   — role-based tokens the UI actually consumes
     3. Dark theme  — the same roles, re-pointed at dark-appropriate steps
     4. Type, space, radius, elevation, motion
   ========================================================================== */

:root {
  /* ======================================================================
     1. PRIMITIVES — raw ramps. Referenced only by section 2 & 3.
     ====================================================================== */

  /* Leaf — the brand/action hue, sampled from the mascot and stepped for
     contrast. Deliberately less saturated than the status-good token below,
     so a primary button never reads as a success state. */
  --leaf-50:  #f0faee;
  --leaf-100: #ddf5d9;
  --leaf-200: #bce7b6;
  --leaf-300: #93d189;
  --leaf-400: #64b468;
  --leaf-500: #429154;
  --leaf-600: #276a3e;   /* action colour — 6.5:1 with white text */
  --leaf-700: #115234;
  --leaf-800: #003c30;
  --leaf-900: #0b2f2f;   /* the sidebar */
  --leaf-950: #021817;

  /* Stone — neutrals for surfaces, ink and hairlines, with a faint green cast. */
  --stone-50:  #f5faf8;
  --stone-100: #edf3f1;
  --stone-150: #e2e9e7;
  --stone-200: #d2dad8;
  --stone-300: #a9b4b0;
  --stone-400: #808c89;
  --stone-500: #5f6c69;
  --stone-600: #404e4b;
  --stone-700: #2b3837;
  --stone-800: #1c2928;
  --stone-900: #131f1e;
  --stone-950: #0a1313;
  --white:     #ffffff;

  /* The mascot's own line colour — used where something belongs to him
     (his speech bubble) rather than to the interface. */
  --mascot-ink: #122b2d;

  /* Chart categorical hues — validated for colour-vision deficiency in both
     modes. Assign in slot order, never cycled. Past slot 8, fold to "Other".
     These are data colours and are deliberately NOT brand-driven: a series
     means an entity, not Vleetle. */
  --chart-1: #2a78d6;  /* blue    */
  --chart-2: #eb6834;  /* orange  */
  --chart-3: #1baf7a;  /* aqua    */
  --chart-4: #eda100;  /* yellow  */
  --chart-5: #e87ba4;  /* magenta */
  --chart-6: #008300;  /* green   */
  --chart-7: #4a3aa7;  /* violet  */

  /* De zachte kant van dezelfde acht. Ze zijn er gekomen voor de vlakjes achter
     een bestandspictogram: het ontwerp tint die per soort, en zonder deze acht
     stond er acht keer hetzelfde grijs.

     Als rgba en niet als eigen hex, om de reden dat `--accent-soft` in het
     donkere thema dat ook is: een wassing van de kleur zelf blijft bij de kleur
     horen als die ooit verschuift, en een losse hex gaat dan stilletjes uit de
     pas lopen.

     Ze dragen géén tekst. Een pictogram is geen letter, dus de eis is 3:1 en
     niet 4,5:1 — en er staat hier niets overheen wat gelezen moet worden. */
  --chart-1-soft: rgba(42, 120, 214, 0.14);
  --chart-2-soft: rgba(235, 104, 52, 0.14);
  --chart-3-soft: rgba(27, 175, 122, 0.14);
  --chart-4-soft: rgba(237, 161, 0, 0.16);
  --chart-5-soft: rgba(232, 123, 164, 0.16);
  --chart-7-soft: rgba(74, 58, 167, 0.12);
  --chart-8: #e34948;  /* red     */

  /* Status — reserved. Never reused as a series colour, always paired with
     an icon + text label so meaning never rides on hue alone. Status green
     is brighter and far more saturated than the brand green; that gap plus
     the label is what keeps "healthy" from reading as "branded". */
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;

  /* ======================================================================
     2. SEMANTIC TOKENS — light mode (the default)
     ====================================================================== */

  /* Surfaces, from furthest back to closest to the reader */
  --surface-page:    var(--stone-50);
  --surface-raised:  var(--white);      /* cards, panels, table body */
  --surface-sunken:  var(--stone-100);  /* wells, inactive tracks */
  --surface-hover:   var(--stone-100);
  --surface-active:  var(--stone-150);
  --surface-inverse: var(--stone-900);

  /* Sidebar gets its own surface so re-theming the nav is a two-line change */
  --surface-nav:        var(--leaf-900);
  --nav-ink:            #c2d2cb;
  --nav-ink-strong:     var(--white);
  --nav-ink-muted:      #7c8e88;
  --nav-item-hover:     rgba(255, 255, 255, 0.07);
  --nav-item-active:    rgba(255, 255, 255, 0.11);
  --nav-border:         rgba(255, 255, 255, 0.09);

  /* Ink */
  --text-primary:   var(--stone-950);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-faint:     var(--stone-400);

  /* Code en gegevens. Bewust géén grafiekkleuren: die zijn gekozen voor
     vlakken van twintig pixels, niet voor letters van twaalf, en de huisregel
     in charts.js zegt al dat tekst nooit de kleur van een reeks draagt.
     Alle vier gemeten op --surface-raised, in beide thema's. */
  /* Vijf statussen en vier prioriteiten. Dit zijn stippen en streepjes van een
     paar pixels — marks, geen tekst — dus ze mogen kleur dragen; de huisregel
     dat tekst nooit de kleur van een reeks krijgt blijft staan. Het groen van
     de mascotte is voor "klaar", want dat is waar het naartoe gaat. */
  --state-backlog: var(--stone-400);
  --state-planned: #2a78d6;
  --state-doing:   #C77B00;
  --state-review:  #6B4FBF;
  --state-done:    var(--leaf-600);

  --prio-urgent:  #A62121;
  --prio-high:    #C77B00;
  --prio-normal:  var(--stone-400);
  --prio-low:     var(--stone-300);

  --code-string:  #1F6F3C;
  --code-number:  #8A4B00;
  --code-key:     #1B4F8A;
  --code-word:    #276A3E;
  --code-tag:     #7A2E7A;
  --text-inverse:   var(--white);
  --text-link:      var(--leaf-600);
  --text-success:   #078000;
  --text-danger:    #9e2d28;

  /* Lines */
  --border-subtle: var(--stone-150);
  --border-strong: var(--stone-200);
  /* De rand terwijl je erover hangt. Eén stap donkerder dan `--border-strong`:
     genoeg om te zeggen "hier kun je op drukken", te weinig om de knop van
     vorm te laten veranderen onder de cursor. */
  --border-hover:  var(--stone-300);
  --border-focus:  #3a874f;
  --focus-ring:    0 0 0 3px rgba(58, 135, 79, 0.30);

  /* Action colours */
  --accent:            var(--leaf-600);
  --accent-hover:      var(--leaf-700);
  --accent-active:     #0a4027;
  --accent-ink:        var(--white);
  --accent-soft:       var(--leaf-50);
  --accent-soft-ink:   #1d5e35;
  --accent-soft-hover: var(--leaf-100);
  /* De rand om een zacht groen vlak. `--accent` is daar te donker voor: op een
     knop van 30 pixels met een lichte vulling leest die als een omlijning in
     plaats van als "dit staat aan". Dit is dezelfde familie, drie stappen
     lichter — genoeg om de vorm te dragen zonder te roepen. */
  --accent-soft-border: var(--leaf-200);

  /* Brand mark: the logo sits on a white tile, the wordmark inherits ink */
  --brand-mark-bg:  var(--white);
  --brand-mark-ink: var(--leaf-800);

  /* Chart chrome */
  --chart-surface:  var(--white);
  --chart-grid:     #e3e9e7;
  --chart-axis:     #d1dad7;
  --chart-label:    var(--stone-500);
  --chart-inactive: var(--stone-200);

  /* Status washes for badges — tinted background + dark ink keeps text legible */
  --good-bg:     #e4f5e2;  --good-ink:     #0a6b12;  --good-line:     #b4e2b2;
  --warning-bg:  #fdf3dc;  --warning-ink:  #7a5300;  --warning-line:  #f2dda8;
  --serious-bg:  #fdeee7;  --serious-ink:  #8f3d18;  --serious-line:  #f7d2c0;
  --critical-bg: #fbe9e9;  --critical-ink: #9c1f1f;  --critical-line: #f2c4c4;
  --neutral-bg:  var(--stone-100); --neutral-ink: var(--stone-600); --neutral-line: var(--stone-200);
  /* Eén blauwe wassing erbij. Documenten en verbanden hebben een soort, en een
     soort die alleen uit woorden bestaat leest niemand terug — maar er waren
     vier tinten en vijf soorten. Dit is de vijfde, gemeten net als de rest. */
  --info-bg:     #e9eefa;  --info-ink:     #1f4b8f;  --info-line:     #c3d3ee;

  /* Zes projectkleuren. Een project draagt er één, zodat je op een pagina vol
     kaarten aan de tegel ziet wélk project je voor je hebt voordat je de naam
     hebt gelezen — en zodat de voortgangsbalk van twee projecten naast elkaar
     niet dezelfde streep is.

     Het is geen reekskleur: een reeks betekent een entiteit binnen één grafiek,
     dit betekent "dit project en niet dat project". Het paar is met opzet een
     vulling én een inkt, want de initialen staan óp die vulling en die moeten
     leesbaar zijn — allebei gemeten in licht en donker. De `bar` is de volle
     kleur voor de balk, die geen tekst draagt en dus dieper mag.

     Welk project welk nummer krijgt volgt uit zijn code en wordt nergens
     opgeslagen: een kleur die je bewaart kan uit de pas lopen met een project
     dat je hernoemt. */
  --proj-1-bg: #dfeedb;  --proj-1-ink: #245c26;  --proj-1-bar: #2f7d3d;
  --proj-2-bg: #dfe9f7;  --proj-2-ink: #1f4b8f;  --proj-2-bar: #2a78d6;
  --proj-3-bg: #fdeacd;  --proj-3-ink: #7a4a06;  --proj-3-bar: #bd7714;
  --proj-4-bg: #d9eeea;  --proj-4-ink: #16584c;  --proj-4-bar: #1b8f7c;
  --proj-5-bg: #e5e2f6;  --proj-5-ink: #3d3392;  --proj-5-bar: #5b4bd6;
  --proj-6-bg: #f8e0ea;  --proj-6-ink: #8a2050;  --proj-6-bar: #c94d84;

  /* Zes gezichtskleuren — dezelfde zes tinten, andere betekenis. Een lijst met
     acht namen erin is acht keer dezelfde grijze cirkel, en dan lees je elke
     keer de letters; met kleur herken je je eigen teamlead voordat je iets
     gelezen hebt.

     Eerst waren dit aliassen van `--proj-N-bar`. Dat was fout, en het meten
     wees het aan: de `bar` is gemaakt om als streep op de pagina te liggen en
     draagt geen tekst, dus hij is niet donker genoeg voor witte letters —
     amber haalde 3,61:1 in het lichte thema. En in het donkere thema wordt de
     `bar` juist opgelicht om op een donkere ondergrond te blijven werken, wat
     wit erop nóg slechter maakt: 2,43:1.

     Dit zijn dus zes eigen waarden: dezelfde tinten, verdiept tot wit er op
     11 pixels 4,8:1 haalt, en in beide thema's dezelfde — een gezicht ligt
     niet óp de pagina zoals een streep, het is zijn eigen vlakje. Groen en
     paars waren al donker genoeg en zijn ongewijzigd overgenomen.

     Twee letters op 11 pixels zijn gewone tekst, geen kop: 4,5 en niet 3.
     Gemeten in `test/facecontrast.mjs`, dat ook meldt welke van de zes nergens
     in beeld kwam. */
  --who-1: #2f7d3d;   /* groen  — ongewijzigd, haalde 5,09:1 */
  --who-2: #2872cc;   /* blauw  — was #2a78d6 */
  --who-3: #a0640f;   /* amber  — was #bd7714 */
  --who-4: #17806f;   /* teal   — was #1b8f7c */
  --who-5: #5b4bd6;   /* paars  — ongewijzigd, haalde 6,14:1 */
  --who-6: #bc477b;   /* roze   — was #c94d84 */
  --who-ink: #ffffff;

  /* ======================================================================
     3. SCALE TOKENS — mode-independent
     ====================================================================== */

  /* Type. System sans throughout; no display or serif face anywhere. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11px — micro labels, table meta */
  --text-xs:  0.75rem;    /* 12px — eyebrows, badges, axis ticks */
  --text-sm:  0.8125rem;  /* 13px — table cells, secondary UI */
  --text-md:  0.875rem;   /* 14px — body default */
  --text-lg:  1rem;       /* 16px — card titles */
  --text-xl:  1.25rem;    /* 20px — page title */
  --text-2xl: 1.75rem;    /* 28px — stat tile values */
  --text-3xl: 3rem;       /* 48px — hero figure (exactly one per view) */

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-normal: 1.55;

  --tracking-wide: 0.06em;   /* uppercase eyebrows only */

  /* Space — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  /* Radius — tight and conservative.
     Measured against all twelve design files in `New designs/`, counting only
     shapes that carry a surface or a border and skipping circles. Labels come
     out at a median of 4 and buttons at 7 with a wide spread from 4 to 12 —
     `sm` and `md` already sit inside that. Cards were the outlier: 12 is both
     the median and the most common value (16 of 47), and we were at 8.
     Do not read a single design as the rule; two of them disagreed (Code 12,
     Project 16) and only the whole set settled it.

     Two things in the stylesheets are deliberately NOT on this scale, and a
     tidy-up that pulls them in would be wrong:

     · `border-radius: 50%` (26 places) means "a circle", not a size. On a
       non-square box 50% draws an ellipse and `--radius-pill` draws a stadium,
       so they are not interchangeable.
     · The 1px, 2px and 3px values (16 places) sit on shapes 2 to 10 pixels
       across — a legend key 2px tall, a project dot 7px wide. `--radius-sm` at
       4px would be larger than the shape it rounds. These are "as round as
       this fits", not a step on the scale. */
  /* The reading measure — how wide a line of running text is allowed to get.
     Taken 1:1 from the designs: they set it at 727px, which is 96ch in the
     body face at its default size. It was 74ch (558px) and that read as a
     narrow strip in a column of 956.

     In `ch` and not in pixels so it still follows the font size — but mind
     the trap in CLAUDE.md: `ch` is measured against the element's OWN font,
     so 96ch in a 12px monospace block is not this measure at all. Put it on
     the running-text wrapper, never on a code or table element. */
  --doc-measure: 96ch;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Elevation — restrained; the hairline does most of the separating */
  --shadow-xs: 0 1px 2px rgba(10, 19, 19, 0.05);
  --shadow-sm: 0 1px 3px rgba(10, 19, 19, 0.07), 0 1px 2px rgba(10, 19, 19, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 19, 19, 0.09), 0 1px 3px rgba(10, 19, 19, 0.05);
  --shadow-lg: 0 12px 32px rgba(10, 19, 19, 0.14), 0 2px 8px rgba(10, 19, 19, 0.07);
  --scrim:     rgba(10, 19, 19, 0.55);

  /* Layout */
  --sidebar-width: 244px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 60px;
  --content-max: 1440px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* ==========================================================================
   4. DARK THEME
   Declared under BOTH scopes: the media query follows the OS setting, the
   [data-theme] attribute follows the in-app toggle — and the toggle must be
   able to win in either direction. The :where() keeps the media block at
   zero specificity so an explicit light stamp beats OS-dark.

   The accent flips from "dark green with white text" to "light green with
   dark text": on a dark surface a deep green button loses its edge, so the
   button lightens and its ink follows.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --surface-page:    var(--stone-950);
    --surface-raised:  var(--stone-900);
    --surface-sunken:  var(--stone-800);
    --surface-hover:   #1a2726;
    --surface-active:  var(--stone-700);
    --surface-inverse: var(--stone-100);

    --surface-nav:     #050d0c;
    --nav-ink:         #a6b5af;
    --nav-ink-strong:  var(--white);
    --nav-ink-muted:   #697873;
    --nav-item-hover:  rgba(255, 255, 255, 0.06);
    --nav-item-active: rgba(255, 255, 255, 0.10);
    --nav-border:      rgba(255, 255, 255, 0.08);

    --text-primary:   #f0f5f3;
    --text-secondary: #b3bdba;
    --text-muted:     #87928f;
    --text-faint:     var(--stone-500);

    --state-backlog: #7b8a86;
  --state-planned: #6FA8EC;
  --state-doing:   #E0A44A;
  --state-review:  #A99AE8;
  --state-done:    var(--leaf-400);

  --prio-urgent:  #E8807C;
  --prio-high:    #E0A44A;
  --prio-normal:  #7b8a86;
  --prio-low:     #5f6c69;

  --code-string:  #7FD69A;
    --code-number:  #E9B872;
    --code-key:     #7FB6EE;
    --code-word:    #8BCC7D;
    --code-tag:     #D9A2E0;
    --text-inverse:   var(--stone-950);
    --text-link:      #85cc87;
    --text-success:   var(--status-good);
    --text-danger:    #f08a8a;

    --border-subtle: #233130;
    --border-strong: #354342;
    --border-hover:  #485957;
    --border-focus:  #5fb56b;
    --focus-ring:    0 0 0 3px rgba(95, 181, 107, 0.34);

    --accent:            #53a85f;
    --accent-hover:      #62b86a;
    --accent-active:     #74c878;
    --accent-ink:        var(--leaf-950);
    --accent-soft:       rgba(83, 168, 95, 0.16);
    --accent-soft-ink:   #90d192;
    --accent-soft-hover: rgba(83, 168, 95, 0.26);
    --accent-soft-border: rgba(83, 168, 95, 0.38);

    --brand-mark-bg:  var(--white);
    --brand-mark-ink: var(--leaf-800);

    /* Chart hues re-stepped for the dark surface — same eight hues, not a
       different palette. Validated against #131f1e. */
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-4: #c98500;
    --chart-5: #d55181;
    --chart-6: #008300;
    --chart-7: #9085e9;
    /* Iets sterker in het donker: een wassing van 14 procent op een donkere
       ondergrond is met het oog geen vlak meer. */
    --chart-1-soft: rgba(57, 135, 229, 0.22);
    --chart-2-soft: rgba(217, 89, 38, 0.22);
    --chart-3-soft: rgba(25, 158, 112, 0.22);
    --chart-4-soft: rgba(201, 133, 0, 0.22);
    --chart-5-soft: rgba(213, 81, 129, 0.22);
    --chart-7-soft: rgba(144, 133, 233, 0.22);
    --chart-8: #e66767;

    --chart-surface:  var(--stone-900);
    --chart-grid:     #232f2f;
    --chart-axis:     #344240;
    --chart-label:    #87928f;
    --chart-inactive: #354342;

    --good-bg:     rgba(12, 163, 12, 0.15);  --good-ink:     #5ed35e;  --good-line:     rgba(12, 163, 12, 0.35);
    --warning-bg:  rgba(250, 178, 25, 0.15); --warning-ink:  #f0bf5a;  --warning-line:  rgba(250, 178, 25, 0.32);
    --serious-bg:  rgba(236, 131, 90, 0.15); --serious-ink:  #f0a184;  --serious-line:  rgba(236, 131, 90, 0.32);
    --critical-bg: rgba(208, 59, 59, 0.16);  --critical-ink: #ef8080;  --critical-line: rgba(208, 59, 59, 0.34);
    --neutral-bg:  var(--stone-800); --neutral-ink: #b3bdba; --neutral-line: #354342;
    --info-bg:     rgba(64, 124, 214, 0.18); --info-ink:     #8ab4f0;  --info-line:     rgba(64, 124, 214, 0.36);

    /* Dezelfde zes, omgeklapt: op donker draagt de vulling de kleur als waas
       en gaat de inkt juist omhoog in plaats van omlaag. */
    --proj-1-bg: rgba(47, 125, 61, 0.22);   --proj-1-ink: #8ed08f;  --proj-1-bar: #4f9d4a;
    --proj-2-bg: rgba(42, 120, 214, 0.22);  --proj-2-ink: #8ab4f0;  --proj-2-bar: #3987e5;
    --proj-3-bg: rgba(217, 144, 60, 0.22);  --proj-3-ink: #f0bf5a;  --proj-3-bar: #d99a3c;
    --proj-4-bg: rgba(27, 143, 124, 0.22);  --proj-4-ink: #6cc9b6;  --proj-4-bar: #23a58e;
    --proj-5-bg: rgba(91, 75, 214, 0.22);   --proj-5-ink: #a89ef0;  --proj-5-bar: #7a6ce8;
    --proj-6-bg: rgba(201, 77, 132, 0.22);  --proj-6-ink: #eb93b6;  --proj-6-bar: #d96a9b;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --scrim:     rgba(0, 0, 0, 0.62);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:    var(--stone-950);
  --surface-raised:  var(--stone-900);
  --surface-sunken:  var(--stone-800);
  --surface-hover:   #1a2726;
  --surface-active:  var(--stone-700);
  --surface-inverse: var(--stone-100);

  --surface-nav:     #050d0c;
  --nav-ink:         #a6b5af;
  --nav-ink-strong:  var(--white);
  --nav-ink-muted:   #697873;
  --nav-item-hover:  rgba(255, 255, 255, 0.06);
  --nav-item-active: rgba(255, 255, 255, 0.10);
  --nav-border:      rgba(255, 255, 255, 0.08);

  --text-primary:   #f0f5f3;
  --text-secondary: #b3bdba;
  --text-muted:     #87928f;
  --text-faint:     var(--stone-500);

  --state-backlog: #7b8a86;
  --state-planned: #6FA8EC;
  --state-doing:   #E0A44A;
  --state-review:  #A99AE8;
  --state-done:    var(--leaf-400);

  --prio-urgent:  #E8807C;
  --prio-high:    #E0A44A;
  --prio-normal:  #7b8a86;
  --prio-low:     #5f6c69;

  --code-string:  #7FD69A;
  --code-number:  #E9B872;
  --code-key:     #7FB6EE;
  --code-word:    #8BCC7D;
  --code-tag:     #D9A2E0;
  --text-inverse:   var(--stone-950);
  --text-link:      #85cc87;
  --text-success:   var(--status-good);
  --text-danger:    #f08a8a;

  --border-subtle: #233130;
  --border-strong: #354342;
  --border-hover:  #485957;
  --border-focus:  #5fb56b;
  --focus-ring:    0 0 0 3px rgba(95, 181, 107, 0.34);

  --accent:            #53a85f;
  --accent-hover:      #62b86a;
  --accent-active:     #74c878;
  --accent-ink:        var(--leaf-950);
  --accent-soft:       rgba(83, 168, 95, 0.16);
  --accent-soft-ink:   #90d192;
  --accent-soft-hover: rgba(83, 168, 95, 0.26);
  --accent-soft-border: rgba(83, 168, 95, 0.38);

  --brand-mark-bg:  var(--white);
  --brand-mark-ink: var(--leaf-800);

  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-4: #c98500;
  --chart-5: #d55181;
  --chart-6: #008300;
  --chart-7: #9085e9;
  --chart-1-soft: rgba(57, 135, 229, 0.22);
  --chart-2-soft: rgba(217, 89, 38, 0.22);
  --chart-3-soft: rgba(25, 158, 112, 0.22);
  --chart-4-soft: rgba(201, 133, 0, 0.22);
  --chart-5-soft: rgba(213, 81, 129, 0.22);
  --chart-7-soft: rgba(144, 133, 233, 0.22);
  --chart-8: #e66767;

  --chart-surface:  var(--stone-900);
  --chart-grid:     #232f2f;
  --chart-axis:     #344240;
  --chart-label:    #87928f;
  --chart-inactive: #354342;

  --good-bg:     rgba(12, 163, 12, 0.15);  --good-ink:     #5ed35e;  --good-line:     rgba(12, 163, 12, 0.35);
  --warning-bg:  rgba(250, 178, 25, 0.15); --warning-ink:  #f0bf5a;  --warning-line:  rgba(250, 178, 25, 0.32);
  --serious-bg:  rgba(236, 131, 90, 0.15); --serious-ink:  #f0a184;  --serious-line:  rgba(236, 131, 90, 0.32);
  --critical-bg: rgba(208, 59, 59, 0.16);  --critical-ink: #ef8080;  --critical-line: rgba(208, 59, 59, 0.34);
  --neutral-bg:  var(--stone-800); --neutral-ink: #b3bdba; --neutral-line: #354342;
  --info-bg:     rgba(64, 124, 214, 0.18); --info-ink:     #8ab4f0;  --info-line:     rgba(64, 124, 214, 0.36);

  /* Dezelfde zes, omgeklapt: op donker draagt de vulling de kleur als waas
     en gaat de inkt juist omhoog in plaats van omlaag. */
  --proj-1-bg: rgba(47, 125, 61, 0.22);   --proj-1-ink: #8ed08f;  --proj-1-bar: #4f9d4a;
  --proj-2-bg: rgba(42, 120, 214, 0.22);  --proj-2-ink: #8ab4f0;  --proj-2-bar: #3987e5;
  --proj-3-bg: rgba(217, 144, 60, 0.22);  --proj-3-ink: #f0bf5a;  --proj-3-bar: #d99a3c;
  --proj-4-bg: rgba(27, 143, 124, 0.22);  --proj-4-ink: #6cc9b6;  --proj-4-bar: #23a58e;
  --proj-5-bg: rgba(91, 75, 214, 0.22);   --proj-5-ink: #a89ef0;  --proj-5-bar: #7a6ce8;
  --proj-6-bg: rgba(201, 77, 132, 0.22);  --proj-6-ink: #eb93b6;  --proj-6-bar: #d96a9b;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --scrim:     rgba(0, 0, 0, 0.62);
}