/* ==========================================================================
   Werkbon – design tokens
   Alle kleuren, typografie, afstanden en radii staan hier centraal.
   ========================================================================== */
:root {
  /* Basis */
  --color-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F9FAFC;
  --color-surface-sunken: #F1F4F8;
  --color-border: #E3E8EF;
  --color-border-strong: #CDD5E0;

  /* Tekst (contrast op wit: 15,9 / 8,0 / 5,6) */
  --color-text: #172033;
  --color-text-muted: #475467;
  --color-text-subtle: #5D6B82;

  /* Primair */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-soft: #EEF4FF;
  --color-primary-border: #BFD3FB;
  --color-on-primary: #FFFFFF;
  --color-focus: #2563EB;

  /* Signaal */
  --color-danger: #B42318;
  --color-danger-hover: #912018;
  --color-danger-soft: #FEF3F2;
  --color-danger-border: #FECDCA;
  --color-warning-soft: #FFF8EB;
  --color-warning-border: #F3D7A4;
  --color-warning-text: #7A4A06;
  --color-warning-icon: #B45309;
  --color-success-text: #166534;

  /* Demo-markering */
  --color-demo-bar: #172033;
  --color-demo: #FCD34D;
  --color-demo-text: #3B2A00;

  /* Statussen – altijd in combinatie met een tekstlabel */
  --status-nieuw-bg: #F1F5F9;      --status-nieuw-fg: #334155;      --status-nieuw-dot: #64748B;      --status-nieuw-border: #D9E1EA;
  --status-ingepland-bg: #EFF6FF;  --status-ingepland-fg: #1E40AF;  --status-ingepland-dot: #3B82F6;  --status-ingepland-border: #C9DCFB;
  --status-uitvoering-bg: #FFF7E8; --status-uitvoering-fg: #8A3C04; --status-uitvoering-dot: #F59E0B; --status-uitvoering-border: #F6D9A6;
  --status-controle-bg: #F5F1FF;   --status-controle-fg: #5B21B6;   --status-controle-dot: #8B5CF6;   --status-controle-border: #DCCFFB;
  --status-afgerond-bg: #ECFDF3;   --status-afgerond-fg: #166534;   --status-afgerond-dot: #22A55B;   --status-afgerond-border: #BFE8CF;

  /* Typografie */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.875rem;  /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.625rem;   /* 26 */
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Afstanden (4px-raster) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Vormen */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06);
  --shadow-lg: 0 16px 40px rgba(23, 32, 51, 0.18);

  /* Bediening */
  --control-h: 36px;
  --touch-min: 44px;
  --touch-h: 52px;
  --sidebar-w: 232px;
  --mobile-max: 560px;
  --bottombar-h: 76px;
}