/*
  Thema van Resultaat Radar: alle kleuren, lettertypen en afstanden staan hier, nergens anders.
  Een sjabloon of stijlblad gebruikt alleen var(--...) en nooit een eigen kleur, lettertype of afstand.
  Een test (foodcost/test_theme.py) bewaakt dat. Wil je iets aanpassen, dan doe je dat in dit bestand.
*/
:root {
  color-scheme: light;

  /* ---------- Merkkleuren (huisstijl van Resultaat Radar) ---------- */
  --brand-blue: #1E4562;      /* zakelijk blauw */
  --brand-orange: #D97F37;    /* warm oranje */
  --brand-white: #FFFFFF;     /* achtergrond wit */

  /* ---------- Kleuren per rol (afgeleid van de merkkleuren) ---------- */
  --color-bg: #fffdf5;                               /* achtergrond van de pagina: warm wit (besluit eigenaar, 21 sept 2026) */
  --color-bg-subtle: color-mix(in srgb, var(--brand-blue) 6%, var(--brand-white));    /* zacht vlak: hover, labels, balkjes */
  --color-surface: var(--brand-white);               /* kaarten, kop, invoervelden: puur wit, dus het logo staat op zuiver wit */
  --color-text: var(--brand-blue);                   /* tekst en lijnen: zakelijk blauw */
  --color-text-muted: color-mix(in srgb, var(--brand-blue) 75%, var(--brand-white));  /* hulptekst, kolomkoppen (5,0:1 op wit) */
  --color-border: color-mix(in srgb, var(--brand-blue) 18%, var(--brand-white));
  --color-primary: var(--brand-blue);                /* knoppen, links, actieve keuze */
  --color-primary-hover: color-mix(in srgb, var(--brand-blue) 82%, black);
  --color-on-primary: var(--brand-white);            /* tekst op blauw (10,1:1) */
  --color-accent: var(--brand-orange);               /* accent: onderstreping, tellers, balkjes, focus */
  --color-on-accent: var(--brand-blue);              /* tekst op oranje (3,4:1: alleen voor korte, vette tekst) */
  --color-link: var(--brand-blue);

  /* ---------- Functionele kleuren (geen merkkleuren; bewust los van het palet) ---------- */
  --color-danger: #B23A2E;         /* duurder, fout, verwijderen (5,9:1 op wit) */
  --color-success: #2B7A4B;        /* goedkoper, gelukt (5,3:1) */
  --color-caution: #A5580F;        /* wachtrij, let op (5,2:1) */
  --color-warn-bg: #fff6e0;
  --color-warn-fg: #7a5200;
  --color-success-bg: #e3f4ea;
  --color-success-fg: #14532d;
  --color-danger-bg: #fde8e8;
  --color-danger-fg: #7f1d1d;
  --color-paper: var(--brand-white);               /* afdrukken */
  --color-ink: var(--brand-blue);

  /* ---------- Lettertypen ---------- */
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;   /* lopende tekst en tabellen */
  --font-heading: "Accuratist", var(--font-body);                               /* koppen (H1, H2), titels en de naam in de kop */
  --leading-normal: 1.5;

  /* ---------- Lettergroottes ---------- */
  --text-2xs: .75rem;
  --text-xs: .8rem;
  --text-sm: .85rem;
  --text-md: .92rem;
  --text-base: 1rem;
  --text-lg: 1.1rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.75rem;
  --text-chart: 11px;              /* tekst in de prijsgrafiek (tekeneenheden) */
  --text-chart-mobile: 17px;

  /* ---------- Afstanden ---------- */
  --space-hairline: .1rem;
  --space-1: .25rem;
  --space-2: .4rem;
  --space-3: .5rem;
  --space-4: .65rem;
  --space-5: .75rem;
  --space-6: .9rem;
  --space-7: 1rem;
  --space-8: 1.25rem;
  --space-9: 1.5rem;
  --space-10: 2rem;
  --space-11: 3rem;

  /* ---------- Vorm ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-border);
  --layout-max-width: 60rem;
  --layout-max-width-wide: 90rem;      /* schermen met brede tabellen (body class "wide") */
  --icon-size: 1rem;
  --radius-pill: 999px;                /* snelknoppen voor de periode */
  --progress-height: 0.5rem;           /* voortgangsbalk */
  --progress-height-small: 0.35rem;
  --progress-width-small: 6rem;
  --header-logo-height: 3.25rem;
  --login-width: 26rem;                /* breedte van het inlogscherm */
  --login-width-wide: 34rem;           /* de schermen voor tweestapsverificatie instellen en reservecodes */
  --otp-field-width: 12rem;            /* het veld voor een code van 6 cijfers naast de knop */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* codes en sleutels, zodat tekens niet op elkaar lijken */
  --client-logo-max-width: 10rem;
  --client-switch-max-width: 16rem;
  --client-block-min-width: 12rem;
  --phone-mark-height: 2rem;           /* radarsymbool in de smalle kop op de telefoon */
  --phone-menu-button-width: 6.5rem;   /* ruimte rechts in de kop voor de knop Menu */
  --account-button-size: 2.25rem;      /* het ronde accounticoon rechtsboven */
  --account-panel-width: 16rem;
  --print-page-margin: 12mm;           /* rand van een geprint A4 (maandrapport) */
  --report-width: 52rem;               /* het maandrapport op het scherm: ongeveer zo breed als een A4 */
  --report-logo-height: 2.25rem;
}