/* Zozijn-apps — design-tokens (stijlboek v1, 06-10-2026)
   Eén bron voor TAI, UPN Wijzigen en LocatieGram. Kopieer dit bestand ongewijzigd
   naar de app; pas waarden alleen hier (en in het stijlboek op Confluence) aan.
   Alleen custom properties: geen selectors behalve :root, zodat het onder elke CSP werkt. */
:root {
  /* Merk (bron: publieke Zozijn-site) */
  --zz-magenta: #d60077;          /* primair: header, primaire knop, actieve tab, links, focus */
  --zz-magenta-hover: #a8005e;
  --zz-magenta-soft: #fdf2f8;     /* zachte achtergrond: notice, selectie, actieve filter */
  --zz-lime: #bed600;             /* accentstreep onder de header; nooit voor tekst */
  --zz-grey-dark: #4d4f53;
  --zz-grey: #696966;

  /* Neutralen */
  --zz-bg: #faf7f8;               /* pagina */
  --zz-surface: #ffffff;          /* kaarten, nav, modals */
  --zz-text: #1f2937;
  --zz-text-strong: #111827;
  --zz-heading: #374151;
  --zz-muted: #6b7280;
  --zz-faint: #9ca3af;            /* alleen lege staten / decoratief, niet voor essentiële tekst */
  --zz-border-input: #d1d5db;
  --zz-border: #e5e7eb;
  --zz-border-subtle: #f3f4f6;
  --zz-table-head: #f9fafb;
  --zz-disabled-bg: #d8d9db;
  --zz-disabled-text: #696966;

  /* Status — bewust buiten het merk (magenta naast rood is niet te scheiden).
     Eén tint per rol; 'solid' haalt AA (≥4.5:1) met witte tekst. */
  --zz-success: #15803d;          /* knop/toast, wit erop 5.0:1 */
  --zz-success-hover: #166534;
  --zz-success-soft: #dcfce7;
  --zz-success-text: #166534;
  --zz-success-border: #bbf7d0;
  --zz-warning: #f59e0b;          /* balken/randen; NIET met witte tekst */
  --zz-warning-soft: #fffbeb;
  --zz-warning-text: #92400e;
  --zz-warning-border: #fcd34d;
  --zz-danger: #dc2626;           /* knop/toast, wit erop 4.8:1 */
  --zz-danger-hover: #b91c1c;
  --zz-danger-soft: #fee2e2;
  --zz-danger-text: #991b1b;
  --zz-neutral-soft: #f3f4f6;
  --zz-neutral-text: #4b5563;     /* 7.6:1 op neutral-soft */
  --zz-info: #d60077;             /* info = merk */

  /* Omgevingsbanners (niet op prd). Witte tekst haalt AA. */
  --zz-env-dev: #c2410c;
  --zz-env-test: #1d4ed8;
  --zz-env-acc: #6d28d9;

  /* Focus: altijd zichtbaar, in merkkleur */
  --zz-focus-ring: 0 0 0 3px rgba(214, 0, 119, 0.28);

  /* Typografie: systeemfont, geen webfonts (CSP font-src 'self', geen CDN) */
  --zz-font: 'Segoe UI', Tahoma, Arial, sans-serif;
  --zz-fs-xs: .7rem;   --zz-fs-sm: .8rem;   --zz-fs-base: .875rem;
  --zz-fs-md: .95rem;  --zz-fs-lg: 1rem;    --zz-fs-xl: 1.2rem;   --zz-fs-stat: 2rem;
  --zz-lh: 1.5;

  /* Vorm */
  --zz-radius-sm: 4px; --zz-radius: 6px; --zz-radius-lg: 8px; --zz-radius-xl: 10px; --zz-radius-pill: 9999px;
  --zz-shadow-card: 0 1px 3px rgba(0,0,0,.08);
  --zz-shadow-card-hover: 0 2px 8px rgba(0,0,0,.12);
  --zz-shadow-header: 0 2px 6px rgba(0,0,0,.2);
  --zz-shadow-toast: 0 4px 12px rgba(0,0,0,.2);
  --zz-shadow-modal: 0 20px 60px rgba(0,0,0,.3);
  --zz-overlay: rgba(0,0,0,.5);

  /* Lagen */
  --zz-z-dropdown: 60; --zz-z-modal: 100; --zz-z-toast: 200; --zz-z-loader: 300;

  /* Maat */
  --zz-content-max: 1200px;
  /* Breakpoint (in media queries niet als variabele bruikbaar): 640px */
}