/* ════════════════════════════════════════════════════════════
   Selvi Portaal — GEDEELDE DESIGN-TOKENS (één bron van waarheid)
   Beide portalen (Werkportaal + Klantportaal) laden dit als basis.
   De waarden zijn gelijk aan de design-handoff (selvi-design.css,
   de --selvi-*-remap) zodat beide portalen exact hetzelfde rustige
   Selvi-palet gebruiken. Beide naamconventies zijn aliassen op
   DEZELFDE waarden, zodat bestaande CSS in beide apps blijft werken.
   Portaal-specifieke afwijkingen (sidebar-breedte, kaartschaduw)
   staan in de eigen stylesheet en overschrijven deze tokens.
   ════════════════════════════════════════════════════════════ */
:root {
  /* ── Oppervlakken & tekst ── */
  --bg: #F7FAFB;
  --surface: #FFFFFF;
  --surface-2: #F1F6F8;
  --surface-3: #EEF3F6;
  --text: #0F1F26;
  --text-2: #5B6B73;
  --text-1: var(--text);   /* 5× gebruikt maar was nergens gedefinieerd (viel terug op inherit) */
  --text-3: #66747C;   /* AA-contrast (~4,8:1) — was #9AA9B0 (~2,4:1), stond op echte tekst op 60+ plekken (audit 18-07) */
  --border: #E2E8EC;
  --border-strong: #D2DEE4;

  /* ── Selvi huisstijl (petrol/teal-blauw). --brand is via Beheer→Huisstijl
       overschrijfbaar (applyTheme zet 'm runtime op :root). ── */
  --brand: #104056;
  --brand-2: #1D6F8C;
  --brand-soft: #E2F0F5;
  --brand-grad: linear-gradient(135deg, #104056 0%, #1D6F8C 100%);
  --brand-grad-soft: linear-gradient(135deg, #E2F0F5 0%, #EEF5F8 100%);
  --brand-shadow: 16, 64, 86;

  /* ── Semantische statuskleuren — rustig Selvi-palet (gelijk in beide portalen) ── */
  --success: #1E7D4F;       --success-soft: #E9F4ED;
  --warning: #9A6700;       --warning-soft: #FEF6E7;
  --danger:  #B3261E;       --danger-soft:  #FBE9E7;
  --info:    #1B6B8C;       --info-soft:    #E2F0F5;
  --purple:  #4B3A86;       --purple-soft:  #EEEAF7;

  /* ── Actie-warm (klant-CTA / aandacht) — één bron i.p.v. 7 gedrifte oranjetinten (design-audit 17-07) ── */
  --accent-warm:   #E0682A;   --accent-strong: #C2702A;   --accent-soft:   #FDF1E6;   --accent-ink: #9A4A12;
  --accent-grad:   linear-gradient(180deg, #F2913F, #E0682A);

  /* ── Type-schaal (design-audit 17-07): één benoemde set i.p.v. ~20 gedrifte inline-px.
       Nieuwe/aangepaste UI gebruikt deze tokens; bestaande inline-px blijven werken. ── */
  --fs-2xs: 10.5px;   /* micro-labels, pill-tekst */
  --fs-xs:  11.5px;   /* bijschrift, meta */
  --fs-sm:  12.5px;   /* secundaire tekst, tabelcel */
  --fs-base: 13px;    /* basis werkportaal */
  --fs-md:  14px;     /* basis klantportaal / comfort */
  --fs-lg:  16px;     /* sectiekop */
  --fs-xl:  19px;     /* paginatitel */
  --fs-2xl: 24px;     /* hero / groot getal */
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* ── Veldstandaard (breedte/hoogte/lettergrootte van invoervelden — één bron over 3 portalen).
       Twee hoogtes: compact (dicht werkportaal) en comfort (ruimer klant/touch). ── */
  --field-h: 38px;
  --field-h-comfort: 44px;
  --field-pad-x: 12px;
  --field-radius: 10px;
  --field-bg: var(--surface);
  --field-bg-soft: #F8FBFC;
  --field-border: var(--border);
  --field-fs: var(--fs-base);

  /* ── Vorm & diepte ── */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow: 0 1px 4px rgba(16,64,86,.06);
  --shadow-lg: 0 18px 44px rgba(14,46,58,.18);
  --transition: all .18s cubic-bezier(.4,0,.2,1);

  /* ── Aliassen: Klantportaal-naamgeving → dezelfde tokens (niet apart bijhouden) ── */
  --card: var(--surface);
  --ink: var(--text);
  --muted: var(--text-2);
  --faint: #66747C;   /* §5.3/#30 + B14: muted-hint-tekst; #6B7A82 zat op ~4.44:1 (net onder AA) → #66747C ≈ 4.8:1 op wit, blijft lichter dan --text-2 (hiërarchie behouden) */
  --line: var(--border);
  --line2: #EDF1F3;
  --navy: var(--text);
  --accent: var(--brand);
  /* (--accent-soft NIET hier aliasen: dat clashte met de warme --accent-soft (#FDF1E6) hierboven.
     De alias was 0× gebruikt; wie een blauwe zachte tint wil, gebruikt --brand-soft direct.) */
  --green: var(--success);    --green-bg: var(--success-soft);
  --amber: var(--warning);    --amber-bg: var(--warning-soft);
  --red: var(--danger);       --red-bg: var(--danger-soft);
  --purple-bg: var(--purple-soft);
  --blue-bg: var(--info-soft);
  --r-sm: var(--radius-sm);
}

/* Toegankelijkheid (audit 18-07): respecteer verminderde-beweging-voorkeur — animaties/transities vrijwel uit. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}