/* ============================================================
   Balans — gedeelde design tokens
   Zie docs/Balans Style Guide.html.

   Eén bron voor beide clients: de Web Cockpit en de MAUI-app laden dit bestand als
   _content/Balans.Client/css/tokens.css, vóór hun eigen app.css. Daarvóór stond dezelfde
   palet-en-schaal twee keer, met uiteenlopende waarden — auditbevinding H-C1: "zelfde design
   system met uiteenlopende waarden". Layout-maten die maar in één client bestaan (zijbalk,
   inspector, bottom-nav) horen hier niet: die blijven in de app zelf staan.

   Namen dragen betekenis, niet kleur, zodat een repaint een wijziging in één bestand blijft.
   ============================================================ */

:root {
    --brand: #006a55;          /* knoppen, positieve bedragen, focusring */
    --brand-hover: #0d8065;    /* hover, logo, voortgangsbalk */
    --brand-strong: #006a55;   /* tekst op een tint-achtergrond */
    --brand-soft: #e6f2ef;     /* geselecteerde rij, RTA-badge */
    --brand-soft-border: #cfe2db;

    --bg: #f4f7f5;             /* canvas achter de kaart, ook de groepsrij */
    --surface: #ffffff;
    --surface-muted: #f8faf9;  /* kolomkop, hover op de toegewezen-cel */

    --text: #12211c;
    --text-row: #1c2b25;       /* rijtekst in rust — iets zachter dan een kop */
    --muted: #58685f;          /* labels, activiteit, subtekst — 5,9:1 op wit */
    /* Exact € 0,00: aanwezig maar zonder nadruk. De gids noteert #8b9a92; dat haalt maar
       2,9:1 op wit en zakt dus onder WCAG AA voor tekst. Deze tint is de lichtste die
       overal AA haalt: 5,3:1 op wit én 4,6:1 op de selectietint, de lichtste achtergrond
       waarop een nulbedrag ooit staat. Toegankelijkheid wint van het staal. */
    --zero: #626f68;

    --border: #e2e9e5;         /* kaartrand */
    --row-line: #eef2f0;       /* lijn tussen rijen */
    --cell-line: #f2f5f4;      /* kolomscheiding binnen een rij */

    --danger: #b02e18;         /* alarmtekst — 5,9:1 op de rode tint */
    --danger-accent: #d9381e;  /* rijaccent, puur decoratief naast de tekst */
    --danger-soft: #fdf2f2;
    --danger-border: #f0c4bc;

    /* Waarschuwing (offline, nog te synchroniseren): amber die AA haalt op zijn eigen tint. */
    --warning: #7a4a00;
    --warning-soft: #fdf3e3;
    --warning-border: #f0dcb8;

    --radius: 16px;            /* kaarten, badge */
    --radius-sm: 10px;         /* knoppen, nav */
    --radius-xs: 6px;          /* cellen, chips */
    --radius-pill: 999px;      /* vlaggetjes ("Vervallen", "Op pauze") */

    /* Typeschaal uit de gids. Eén familie, twee gewichten: 400 rust, 600 nadruk.
       700+ komt nergens in een datascherm voor. */
    --text-xl: 28px;           /* RTA-bedrag */
    --text-lg: 20px;           /* sectiekop, kaarttitel, maandnav */
    --text-base: 16px;         /* hoofdtekst, invoerveld */
    --text-sm: 14px;           /* rijen, navigatie */
    --text-xs: 12px;           /* kolomkoppen, labels — uppercase + .08em */

    /* Spacing-schaal: 4 · 8 · 12 · 16 · 24 · 32. Andere waarden bestaan niet. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* Eén schaduwniveau. Diepte komt van randen, niet van slagschaduw. */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);

    /* Minimum aanraakvlak. De gids schrijft 48px voor; alles wat je met een duim raakt —
       knop, pill, invoerveld, rij-actie — haalt die maat, ook als het icoon kleiner oogt. */
    --touch: 48px;

    /* Inter waar het bestaat (de cockpit host de woff2 zelf), anders de systeemletter.
       Op Android en Windows levert system-ui hetzelfde beeld als voorheen. */
    --font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}