/* ==========================================================================
   App-contract  —  de variabelen die JOUW componenten lezen
   --------------------------------------------------------------------------
   Je eigen componenten gebruiken UITSLUITEND deze color-, font- en
   radius-variabelen. Ze kennen de NLDS-namen niet; dit is de ENIGE plek
   waar die voorkomen.

   Elke variabele heeft twee bronnen:
       1. --basis-*    officiële NLDS Basis-token (als de gemeente een NLDS-thema levert)
       2. hardcoded    veilige standaard (Rijkshuisstijl)

   Een lichtgewicht gemeentethema overschrijft deze tokens gewoon DIRECT:
   themes/utrecht.css zet bv. --color-primary in een [data-theme]-blok, en
   dat wint via de cascade. Laad dit bestand eerst, daarna de thema's.

   21 tokens mappen op de officiële NLDS Basis-laag (interoperabel);
   --color-accent (pop), --color-footer, --color-panel, --radius-pill en de
   vlag/succes-tokens zijn bewuste extensies zonder eenduidig NLDS-equivalent.
   ========================================================================== */

:root {
  --font-body: var(--basis-text-font-family-default, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  --font-heading: var(--basis-heading-font-family, var(--font-body));

  /* Primair: knoppen, koppen, actieve nav */
  --color-primary: var(--basis-color-action-1-bg-default, #154273);
  --color-primary-dark: var(--basis-color-action-1-bg-hover, #0b3060);
  --color-on-primary: var(--basis-color-action-1-color-default, #ffffff);

  /* Secundair: links + rij-tekst */
  --color-secondary: var(--basis-color-action-2-bg-default, #154273);

  /* Tekst / pagina / paneel */
  --color-text: var(--basis-color-default-color-default, #3b3b3b);
  --color-muted: var(--basis-color-default-color-subtle, #595959);
  --color-page: var(--basis-color-default-bg-default, #f3f3f3);
  --color-panel: #ffffff; /* verhoogd wit vlak — extensie */
  --color-soft: var(--basis-color-action-1-bg-subtle, #e5eff7); /* subtiele tint: actief/banner */
  --color-hover: var(--color-soft); /* hover = thema-afhankelijke tint */
  --color-border: var(--basis-color-default-border-default, #b4b4b4);
  --color-border-soft: var(--basis-color-default-border-subtle, #e0e0e0);

  /* Pop/accent — ALLEEN voor zeer belangrijke UI (notificatie-teller). Extensie. */
  --color-accent: #d74085;
  --color-on-accent: #ffffff;

  /* Footer-achtergrond — extensie */
  --color-footer: #535353;

  /* Focus */
  --color-focus: var(--basis-focus-color, #154273);
  --color-focus-bg: var(--basis-focus-background-color, #ffe600);

  /* Vorm */
  --border-radius: var(--basis-border-radius-md, 2px);
  --radius-pill: 999px; /* volledig ronde hoeken: badges, pills, ronde knoppen */

  /* Status/feedback — mapt op de NLDS Basis feedback-rollen (positive/warning/negative).
     Achtergrond = bg-subtle (pasteltint), tekst = color-default (donker genoeg erop). */
  --ok-bg: var(--basis-color-positive-bg-subtle, #dcf0e4);
  --ok-fg: var(--basis-color-positive-color-default, #1c5b34);
  --warn-bg: var(--basis-color-warning-bg-subtle, #fde9db);
  --warn-fg: var(--basis-color-warning-color-default, #8a3d16);
  --alert: var(--basis-color-negative-color-default, #d53b2a);
  --alert-bg: var(--basis-color-negative-bg-subtle, #fdeceb);

  /* Vlag/attentie (gemarkeerde rijen) en afgeronde stappen — extensies
     zonder eenduidig NLDS-equivalent */
  --flag-bg: #fdf1e7;
  --flag-border: #d98a3d;
  --color-success: #22c55e;
}