/* Ontwerptokens volgens de 2WCF UI Design Standard.
   Afwijking: de primaire knop gebruikt --2wcf-blue-strong (donkerder blauw) omdat witte tekst op #00B6F1
   onder de leesbaarheidsgrens blijft (contrast ongeveer 2,3 op 1). Zie README, "Afwijkingen van de standaard". */
:root {
  --2wcf-blue: #00B6F1;
  --2wcf-blue-strong: #0083B8;
  --2wcf-blue-soft: #E6F6FD;
  --2wcf-green: #A6CE39;
  --2wcf-green-strong: #5E8A0E;
  --2wcf-green-soft: #F0F7DD;
  --2wcf-navy: #122E42;
  --2wcf-navy-soft: #1B3F58;
  --2wcf-white: #FFFFFF;

  --gray-50: #F5F7FA;
  --gray-100: #EAEEF3;
  --gray-200: #D9E0E8;
  --gray-300: #C1CBD6;
  --gray-500: #6B7A89;
  --gray-700: #3D4B58;
  --gray-900: #1B2730;

  --color-success: var(--2wcf-green-strong);
  --color-info: var(--2wcf-blue-strong);
  --color-warning: #B97A00;
  --color-warning-soft: #FFF4DC;
  --color-danger: #D13B3B;
  --color-danger-soft: #FDECEC;

  --radius-control: 8px;
  --radius-panel: 12px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 8px 28px rgba(18, 46, 66, 0.18);

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

  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --nav-width: 268px;
  --nav-width-collapsed: 64px;
  --header-height: 56px;
}