/* mijnhelpdesk.nl design tokens: de huisstijl op één plek.
   Nachtblauw als merkkleur (header, footer, CTA-band), blauw alleen voor wat klikbaar is,
   groen voor "opgelost". Zie de huisstijl voor het waarom per kleur. */
:root {
  --surface: #f7f9fc;          /* pagina-achtergrond, licht met een vleugje blauw */
  --surface-raised: #ffffff;   /* kaarten, formulieren, vertrouwensbalk */
  --surface-sunken: #edf1f7;   /* tags en rustige vlakken */
  --ink: #14233a;
  --ink-muted: #4a5a70;
  --navy: #1e3a5f;             /* merkkleur */
  --chrome: var(--navy);       /* header, footer, CTA-band */
  --on-chrome: #ffffff;
  --on-chrome-muted: #c5d2e3;
  --brand-ink: #1e3a5f;        /* iconen en stapnummers op action-soft */
  --action: #2257d6;
  --action-hover: #1a45ad;
  --on-action: #ffffff;
  --action-soft: #e3ecff;
  --success: #1b7a43;
  --success-soft: #e6f4ec;
  --amber: #e8a317;            /* alleen review-sterren */
  --danger: #b42318;           /* rode waarschuwing: rand, icoon en kop (6,1:1 op danger-soft) */
  --danger-soft: #fdecea;      /* achtergrond van de rode waarschuwing */
  --border: #dce3ec;
  --border-strong: #7b8aa0;
  --focus: var(--action);

  --font-display: "Figtree", "Segoe UI", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20, 35, 58, .06), 0 6px 20px rgba(20, 35, 58, .06);

  --container: 1160px;
  --measure: 65ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0e1726;
    --surface-raised: #16233a;
    --surface-sunken: #0a111d;
    --ink: #eef3fa;
    --ink-muted: #a9b6c8;
    --on-chrome: #ffffff;
    --on-chrome-muted: #c5d2e3;
    --brand-ink: #9dbbff;
    --action: #6e9bff;
    --action-hover: #94b6ff;
    --on-action: #0b1730;
    --action-soft: #1b2f57;
    --success: #4cc38a;
    --success-soft: #12301f;
    --amber: #f2b84b;
    --danger: #ff8f85;
    --danger-soft: #3a1416;
    --border: #2a3a54;
    --border-strong: #6b7d99;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* Keuzes uit de toegankelijkheidswidget. Deze winnen altijd van de instelling van het apparaat. */
:root[data-a11y-contrast="licht"] {
  --surface: #f7f9fc;
  --surface-raised: #ffffff;
  --surface-sunken: #edf1f7;
  --ink: #14233a;
  --ink-muted: #4a5a70;
  --brand-ink: #1e3a5f;
  --action: #2257d6;
  --action-hover: #1a45ad;
  --on-action: #ffffff;
  --action-soft: #e3ecff;
  --success: #1b7a43;
  --success-soft: #e6f4ec;
  --amber: #e8a317;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --border: #dce3ec;
  --border-strong: #7b8aa0;
  --shadow-card: 0 1px 2px rgba(20, 35, 58, .06), 0 6px 20px rgba(20, 35, 58, .06);
  color-scheme: light;
}

:root[data-a11y-contrast="donker"] {
  --surface: #0e1726;
  --surface-raised: #16233a;
  --surface-sunken: #0a111d;
  --ink: #eef3fa;
  --ink-muted: #a9b6c8;
  --brand-ink: #9dbbff;
  --action: #6e9bff;
  --action-hover: #94b6ff;
  --on-action: #0b1730;
  --action-soft: #1b2f57;
  --success: #4cc38a;
  --success-soft: #12301f;
  --amber: #f2b84b;
  --danger: #ff8f85;
  --danger-soft: #3a1416;
  --border: #2a3a54;
  --border-strong: #6b7d99;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* Hoog contrast: zwart op wit, geen tinten, alle randen zwart (minstens 7:1). */
:root[data-a11y-contrast="hoog"] {
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #ffffff;
  --ink: #000000;
  --ink-muted: #000000;
  --chrome: #000000;
  --on-chrome: #ffffff;
  --on-chrome-muted: #ffffff;
  --brand-ink: #000000;
  --action: #0033a0;
  --action-hover: #001f66;
  --on-action: #ffffff;
  --action-soft: #ffffff;
  --success: #00602b;
  --success-soft: #ffffff;
  --amber: #000000;
  --danger: #a00000;
  --danger-soft: #ffffff;
  --border: #000000;
  --border-strong: #000000;
  --shadow-card: none;
  color-scheme: light;
}