:root {
  /* ── Neutral scale — the raw palette. 14 hand-calibrated warm-grey stops,
     denser at the light end where most of the interface actually lives.
     Semantic tokens below are the only thing components should reference. ── */
  --neutral-0: #ffffff;
  --neutral-25: #fafafa;
  --neutral-50: #f7f6f2;
  --neutral-100: #efefec;
  --neutral-150: #e5e5e2;
  --neutral-200: #d9d8d3;
  --neutral-300: #b9b8b2;
  --neutral-400: #a3a3a0;
  --neutral-500: #8b8b86;
  --neutral-600: #666662;
  --neutral-700: #52524f;
  --neutral-800: #333331;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
}

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Semantic surfaces */
  --color-canvas: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-soft: var(--neutral-100);
  --color-surface-subtle: var(--neutral-25);
  --color-surface-hover: color-mix(in srgb, var(--color-text) 4%, var(--color-surface));
  --color-surface-active: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
  --color-surface-disabled: var(--neutral-100);
  --color-surface-inverse: var(--neutral-900);

  /* Semantic text */
  --color-text: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted: var(--neutral-500);
  --color-text-disabled: var(--neutral-400);
  --color-text-inverse: var(--neutral-0);

  /* Semantic lines */
  --color-line: var(--neutral-200);
  --color-line-subtle: var(--neutral-150);
  --color-line-strong: var(--neutral-300);
  --color-line-emphasis: var(--neutral-400);

  /* Controls */
  --color-control: var(--color-surface);
  --color-control-hover: var(--color-surface-hover);
  --color-control-active: var(--color-surface-active);
  --color-focus: var(--color-text);
  --color-danger: var(--color-text);

  /* Legacy aliases — every existing component keeps working unchanged */
  --color-ink: var(--color-text);
  --color-muted: var(--color-text-secondary);
  --color-faint: var(--color-text-muted);

  /* Data scale (monochrome chart series) — data-1 strongest, data-8 weakest */
  --data-1: var(--neutral-900);
  --data-2: var(--neutral-800);
  --data-3: var(--neutral-700);
  --data-4: var(--neutral-600);
  --data-5: var(--neutral-500);
  --data-6: var(--neutral-400);
  --data-7: var(--neutral-300);
  --data-8: var(--neutral-150);
  --chart-1: var(--data-1);
  --chart-2: var(--data-2);
  --chart-3: var(--data-3);
  --chart-4: var(--data-4);
  --chart-5: var(--data-5);
  --chart-6: var(--data-6);
  --chart-7: var(--data-7);
  --chart-8: var(--data-8);

  /* Cartography tokens — own calibration, own purpose; reference the neutral
     system rather than the general UI surface tokens so the map scale can be
     tuned independently of buttons/panels/etc. */
  --map-background: var(--color-canvas);
  --map-fill-0: color-mix(in srgb, var(--color-text) 14%, var(--color-canvas));
  --map-fill-1: color-mix(in srgb, var(--color-text) 28%, var(--color-canvas));
  --map-fill-2: color-mix(in srgb, var(--color-text) 44%, var(--color-canvas));
  --map-fill-3: color-mix(in srgb, var(--color-text) 60%, var(--color-canvas));
  --map-fill-4: color-mix(in srgb, var(--color-text) 76%, var(--color-canvas));
  --map-fill-5: color-mix(in srgb, var(--color-text) 92%, var(--color-canvas));
  --map-no-data: color-mix(in srgb, var(--color-text) 5%, var(--color-canvas));
  --map-border: var(--color-surface);
  --map-border-strong: var(--color-line-strong);
  --map-label: var(--color-text);
  --map-label-muted: var(--color-text-secondary);
  --map-hover: color-mix(in srgb, var(--color-text) 12%, transparent);
  --map-selected: var(--color-text);
  --map-focus: var(--color-text);
  --map-marker: var(--color-text);
  --map-marker-secondary: var(--color-text-secondary);
  /* Step-36 names kept as aliases — nothing already built has to change */
  --map-nodata: var(--map-no-data);
  --map-1: var(--map-fill-0);
  --map-2: var(--map-fill-1);
  --map-3: var(--map-fill-2);
  --map-4: var(--map-fill-3);
  --map-5: var(--map-fill-4);
  --map-6: var(--map-fill-5);

  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --text-micro: 9px;
  --text-xs: 10px;
  --text-label: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-ui: 14px;
  --text-body: 16px;
  --text-subheading: 22px;
  --text-heading: clamp(30px, 4vw, 56px);
  --text-display: clamp(48px, 7vw, 104px);

  --control-sm: 38px;
  --control-md: 40px;
  --control-lg: 48px;

  --shadow-sm: 0 4px 12px color-mix(in srgb, var(--color-ink) 9%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--color-ink) 9%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, var(--color-ink) 11%, transparent);

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

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-control: var(--radius-md);
  --radius-panel: var(--radius-lg);
  --line-width: 1px;
  --content-width: 1200px;
  --page-gutter: 40px;
  --motion-fast: 160ms;
  --motion-base: 220ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: var(--neutral-950);
  --color-surface: var(--neutral-900);
  --color-surface-soft: var(--neutral-800);
  --color-surface-subtle: color-mix(in srgb, var(--neutral-900) 60%, var(--neutral-950));
  --color-surface-hover: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  --color-surface-active: color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
  --color-surface-disabled: var(--neutral-800);
  --color-surface-inverse: var(--neutral-50);

  --color-text: var(--neutral-25);
  --color-text-secondary: var(--neutral-400);
  --color-text-muted: var(--neutral-600);
  --color-text-disabled: var(--neutral-700);
  --color-text-inverse: var(--neutral-900);

  --color-line: var(--neutral-800);
  --color-line-subtle: color-mix(in srgb, var(--neutral-800) 60%, var(--neutral-900));
  --color-line-strong: var(--neutral-700);
  --color-line-emphasis: var(--neutral-600);

  --color-control: var(--color-surface);
  --color-control-hover: var(--color-surface-hover);
  --color-control-active: var(--color-surface-active);
  --color-focus: var(--color-text);
  --color-danger: var(--color-text);

  --color-ink: var(--color-text);
  --color-muted: var(--color-text-secondary);
  --color-faint: var(--color-text-muted);

  --data-1: var(--neutral-25);
  --data-2: var(--neutral-150);
  --data-3: var(--neutral-300);
  --data-4: var(--neutral-400);
  --data-5: var(--neutral-500);
  --data-6: var(--neutral-600);
  --data-7: var(--neutral-700);
  --data-8: var(--neutral-800);
  --chart-1: var(--data-1);
  --chart-2: var(--data-2);
  --chart-3: var(--data-3);
  --chart-4: var(--data-4);
  --chart-5: var(--data-5);
  --chart-6: var(--data-6);
  --chart-7: var(--data-7);
  --chart-8: var(--data-8);

  --map-background: var(--color-canvas);
  --map-fill-0: color-mix(in srgb, var(--color-text) 14%, var(--color-canvas));
  --map-fill-1: color-mix(in srgb, var(--color-text) 28%, var(--color-canvas));
  --map-fill-2: color-mix(in srgb, var(--color-text) 44%, var(--color-canvas));
  --map-fill-3: color-mix(in srgb, var(--color-text) 60%, var(--color-canvas));
  --map-fill-4: color-mix(in srgb, var(--color-text) 76%, var(--color-canvas));
  --map-fill-5: color-mix(in srgb, var(--color-text) 92%, var(--color-canvas));
  --map-no-data: color-mix(in srgb, var(--color-text) 5%, var(--color-canvas));
  --map-border: var(--color-surface);
  --map-border-strong: var(--color-line-strong);
  --map-label: var(--color-text);
  --map-label-muted: var(--color-text-secondary);
  --map-hover: color-mix(in srgb, var(--color-text) 12%, transparent);
  --map-selected: var(--color-text);
  --map-focus: var(--color-text);
  --map-marker: var(--color-text);
  --map-marker-secondary: var(--color-text-secondary);
  --map-nodata: var(--map-no-data);
  --map-1: var(--map-fill-0);
  --map-2: var(--map-fill-1);
  --map-3: var(--map-fill-2);
  --map-4: var(--map-fill-3);
  --map-5: var(--map-fill-4);
  --map-6: var(--map-fill-5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-canvas: var(--neutral-950);
    --color-surface: var(--neutral-900);
    --color-surface-soft: var(--neutral-800);
    --color-surface-subtle: color-mix(in srgb, var(--neutral-900) 60%, var(--neutral-950));
    --color-surface-hover: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
    --color-surface-active: color-mix(in srgb, var(--color-text) 12%, var(--color-surface));
    --color-surface-disabled: var(--neutral-800);
    --color-surface-inverse: var(--neutral-50);
    --color-text: var(--neutral-25);
    --color-text-secondary: var(--neutral-400);
    --color-text-muted: var(--neutral-600);
    --color-text-disabled: var(--neutral-700);
    --color-text-inverse: var(--neutral-900);
    --color-line: var(--neutral-800);
    --color-line-subtle: color-mix(in srgb, var(--neutral-800) 60%, var(--neutral-900));
    --color-line-strong: var(--neutral-700);
    --color-line-emphasis: var(--neutral-600);
    --color-control: var(--color-surface);
    --color-control-hover: var(--color-surface-hover);
    --color-control-active: var(--color-surface-active);
    --color-focus: var(--color-text);
    --color-danger: var(--color-text);
    --color-ink: var(--color-text);
    --color-muted: var(--color-text-secondary);
    --color-faint: var(--color-text-muted);
    --data-1: var(--neutral-25);
    --data-2: var(--neutral-150);
    --data-3: var(--neutral-300);
    --data-4: var(--neutral-400);
    --data-5: var(--neutral-500);
    --data-6: var(--neutral-600);
    --data-7: var(--neutral-700);
    --data-8: var(--neutral-800);
    --chart-1: var(--data-1);
    --chart-2: var(--data-2);
    --chart-3: var(--data-3);
    --chart-4: var(--data-4);
    --chart-5: var(--data-5);
    --chart-6: var(--data-6);
    --chart-7: var(--data-7);
    --chart-8: var(--data-8);
    --map-background: var(--color-canvas);
    --map-fill-0: color-mix(in srgb, var(--color-text) 14%, var(--color-canvas));
    --map-fill-1: color-mix(in srgb, var(--color-text) 28%, var(--color-canvas));
    --map-fill-2: color-mix(in srgb, var(--color-text) 44%, var(--color-canvas));
    --map-fill-3: color-mix(in srgb, var(--color-text) 60%, var(--color-canvas));
    --map-fill-4: color-mix(in srgb, var(--color-text) 76%, var(--color-canvas));
    --map-fill-5: color-mix(in srgb, var(--color-text) 92%, var(--color-canvas));
    --map-no-data: color-mix(in srgb, var(--color-text) 5%, var(--color-canvas));
    --map-border: var(--color-surface);
    --map-border-strong: var(--color-line-strong);
    --map-label: var(--color-text);
    --map-label-muted: var(--color-text-secondary);
    --map-hover: color-mix(in srgb, var(--color-text) 12%, transparent);
    --map-selected: var(--color-text);
    --map-focus: var(--color-text);
    --map-marker: var(--color-text);
    --map-marker-secondary: var(--color-text-secondary);
    --map-nodata: var(--map-no-data);
    --map-1: var(--map-fill-0);
    --map-2: var(--map-fill-1);
    --map-3: var(--map-fill-2);
    --map-4: var(--map-fill-3);
    --map-5: var(--map-fill-4);
    --map-6: var(--map-fill-5);
  }
}

@media (max-width: 760px) {
  :root { --page-gutter: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}