:root {
  /* === EC Laadpalen Design Tokens === */

  /* Brand colors — 1:1 gelijkgetrokken met netcongestie (WP Masters / Benthe).
     Oude turquoise (#52a3b6 / #438a99 / #c8e4ec) vervangen door donker-teal
     #003941; #013943 -> #003941 zodat alle teal exact netcongestie matcht. */
  --ec-primary:        #003941;
  --ec-primary-hover:  #00262b;
  --ec-primary-light:  #d3e0e1;
  --ec-dark:           #003941;
  --ec-bg:             #f2ffeb;
  --ec-accent:         #ffbc42;
  --ec-accent-hover:   #e8a52e;

  /* Neutrals */
  --ec-white:    #ffffff;
  --ec-gray-50:  #f8fafa;
  --ec-gray-100: #eef2f3;
  --ec-gray-200: #d9dfe1;
  --ec-gray-400: #8a9498;
  --ec-gray-600: #4a5458;
  --ec-gray-900: #1a2226;

  /* Semantic */
  --ec-text:        var(--ec-dark);
  --ec-text-muted:  var(--ec-gray-600);
  --ec-border:      var(--ec-gray-200);

  /* Typography */
  --ec-font-title: 'Rubik', system-ui, sans-serif;
  --ec-font-body:  'Roboto', system-ui, -apple-system, sans-serif;

  --ec-fs-xs:   0.75rem;   /* 12px */
  --ec-fs-sm:   0.875rem;  /* 14px */
  --ec-fs-base: 1rem;      /* 16px */
  --ec-fs-lg:   1.125rem;  /* 18px */
  --ec-fs-xl:   1.375rem;  /* 22px */
  --ec-fs-2xl:  1.75rem;   /* 28px */
  --ec-fs-3xl:  2.25rem;   /* 36px */

  --ec-lh-tight:   1.25;
  --ec-lh-normal:  1.5;
  --ec-lh-relaxed: 1.7;

  --ec-fw-regular: 400;
  --ec-fw-medium:  500;
  --ec-fw-semibold:600;
  --ec-fw-bold:    700;

  /* Spacing (4px scale) */
  --ec-space-1:  0.25rem;  /* 4px */
  --ec-space-2:  0.5rem;   /* 8px */
  --ec-space-3:  0.75rem;  /* 12px */
  --ec-space-4:  1rem;     /* 16px */
  --ec-space-6:  1.5rem;   /* 24px */
  --ec-space-8:  2rem;     /* 32px */
  --ec-space-12: 3rem;     /* 48px */
  --ec-space-16: 4rem;     /* 64px */

  /* Border radius */
  --ec-radius-sm: 4px;
  --ec-radius-md: 8px;
  --ec-radius-lg: 12px;
  --ec-radius-pill: 999px;

  /* Shadows */
  --ec-shadow-sm: 0 1px 2px rgba(1,57,67,0.08);
  --ec-shadow-md: 0 4px 12px rgba(1,57,67,0.10);
  --ec-shadow-lg: 0 8px 24px rgba(1,57,67,0.14);

  /* Layout */
  --ec-container-max: 1400px;
  --ec-gutter:        var(--ec-space-4);
}

/* Breakpoints (used in media queries — no var() in @media) */
/* sm: 640px / md: 768px / lg: 1024px / xl: 1280px */