:root {
  --panel-w: 336px;
  --header-h: 72px;
  --toolbar-h: 76px;

  --color-canvas: #000;
  --color-surface: #050505;
  --color-surface-raised: #111;
  --color-border: #3b3b3b;
  --color-border-strong: #686868;
  --color-text: #f6f6f6;
  --color-text-muted: #8f8f8f;
  --color-text-subtle: #606060;
  --color-accent: #fff;
  --color-danger: #ef6b6b;
  --color-active-gene: #69d68b;

  --font-interface: Arial, Helvetica, sans-serif;
  --font-technical: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

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

  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 18px;

  /* Compatibility aliases used by existing visualization styles. */
  --bg-dark: var(--color-canvas);
  --bg-panel: var(--color-surface);
  --border: var(--color-border);
  --accent: var(--color-accent);
  --ok: var(--color-active-gene);
  --muted: var(--color-text-muted);
  --tile-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}