:root,
:root[data-theme="light"] {
  --surface: #f7f9f9;
  --surface-raised: #ffffff;
  --surface-sunken: #edefee;
  --ink: #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted: #6b6a64;
  --border: rgba(11,11,11,0.12);
  --gridline: #e1e0d9;

  --brand-100: #e3f1ef;
  --brand-600: #0e5c57;
  --brand-700: #0a4740;
  --on-brand: #ffffff;

  --accent-600: #eb6834;
  --accent-700: #c6501f;
  --on-accent: #0b0b0b;

  --focus-ring: var(--brand-600);

  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --on-status: #0b0b0b;
  --on-critical: #ffffff;

  --laag-adressen: #2a78d6;
  --laag-zichtmeldingen: #eb6834;
  --laag-flyers-fysiek: #1baf7a;
  --laag-flyers-brievenbus: #eda100;
  --laag-flyers-email: #e87ba4;
  --laag-zoekers: #7b5cd6;
  --laag-coordinatoren: #0b0b0b;
  --laag-spotschema: #008300;
  --laag-speurhond: #4a3aa7;
  --laag-drone: #e34948;

  --melder-0: #e6194b;
  --melder-1: #3cb44b;
  --melder-2: #4363d8;
  --melder-3: #9a6324;
  --melder-4: #469990;
  --melder-5: #17a2b8;
  --melder-6: #d6349a;
  --melder-7: #8a8a00;

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

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,11,11,0.10);
  --shadow-md: 0 8px 24px rgba(11,11,11,0.16);
}

:root[data-theme="dark"] {
  --surface: #12181a;
  --surface-raised: #1b2224;
  --surface-sunken: #0a0e0f;
  --ink: #ffffff;
  --ink-secondary: #c3c2b7;
  --ink-muted: #9b9a93;
  --border: rgba(255,255,255,0.14);
  --gridline: #2c2c2a;

  --brand-100: #14302d;
  --brand-600: #4fbdaf;
  --brand-700: #74d6c9;
  --on-brand: #0d1210;

  --accent-600: #d95926;
  --accent-700: #e67a3d;
  --on-accent: #0b0b0b;

  --laag-adressen: #3987e5;
  --laag-zichtmeldingen: #d95926;
  --laag-flyers-fysiek: #199e70;
  --laag-flyers-brievenbus: #c98500;
  --laag-flyers-email: #d55181;
  --laag-zoekers: #9b82e8;
  --laag-coordinatoren: #ffffff;
  --laag-spotschema: #008300;
  --laag-speurhond: #9085e9;
  --laag-drone: #e66767;

  --melder-0: #f04868;
  --melder-1: #55cb64;
  --melder-2: #6883eb;
  --melder-3: #c68642;
  --melder-4: #6cbdb5;
  --melder-5: #3ec2d6;
  --melder-6: #e85cb5;
  --melder-7: #ababaa;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.50);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --surface: #12181a;
    --surface-raised: #1b2224;
    --surface-sunken: #0a0e0f;
    --ink: #ffffff;
    --ink-secondary: #c3c2b7;
    --ink-muted: #9b9a93;
    --border: rgba(255,255,255,0.14);
    --gridline: #2c2c2a;
    --brand-100: #14302d;
    --brand-600: #4fbdaf;
    --brand-700: #74d6c9;
    --on-brand: #0d1210;
    --accent-600: #d95926;
    --accent-700: #e67a3d;
    --laag-adressen: #3987e5;
    --laag-zichtmeldingen: #d95926;
    --laag-flyers-fysiek: #199e70;
    --laag-flyers-brievenbus: #c98500;
    --laag-flyers-email: #d55181;
    --laag-zoekers: #9b82e8;
    --laag-coordinatoren: #ffffff;
    --laag-speurhond: #9085e9;
    --laag-drone: #e66767;
    --melder-0: #f04868;
    --melder-1: #55cb64;
    --melder-2: #6883eb;
    --melder-3: #c68642;
    --melder-4: #6cbdb5;
    --melder-5: #3ec2d6;
    --melder-6: #e85cb5;
    --melder-7: #ababaa;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.50);
  }
}