:root,
:root[data-theme='light'] {
  /* Foundation tones: keep this small and coherent. */
  --vm-neutral-050: #f3f3f5;
  --vm-neutral-150: #e7e8ec;
  --vm-neutral-250: #d0d3da;
  --vm-neutral-400: #7a7f89;
  --vm-neutral-600: #4d586b;

  --vm-accent: var(--vm-color-accent-primary);
  --vm-accent-soft: var(--vm-color-accent-primary-soft);
  --vm-accent-outline: var(--vm-color-accent-outline);

  --vm-dark-900: var(--vm-color-surface-base);
  --vm-shadow-soft: rgba(0, 0, 0, 0.2);

  /* App palette (single source of color truth) */
  --vm-color-white: #ffffff;
  --vm-color-bg-main: var(--vm-color-surface-base);
  --vm-color-bg-panel: var(--vm-color-surface-panel);
  --vm-color-text-main: var(--vm-color-text-primary);

  /* Sidebar / toolbar neutrals */
  --vm-color-toolbar-bg: var(--vm-color-surface-base);
  --vm-color-toolbar-border: var(--vm-color-border);
  --vm-color-toolbar-divider: var(--vm-color-toolbar-border);
  --vm-color-toolbar-control-bg: var(--vm-color-surface-panel);
  --vm-color-toolbar-control-bg-hover: color-mix(in srgb, var(--vm-color-surface-panel) 88%, var(--vm-color-surface-base));
  --vm-color-toolbar-button-bg: var(--vm-color-surface-control);
  --vm-color-toolbar-input-bg: var(--vm-color-surface-panel);
  --vm-color-toolbar-input-border: var(--vm-color-border-input);
  --vm-color-toolbar-tooltip-bg: var(--vm-color-surface-control);
  --vm-color-toolbar-section-divider: var(--vm-color-toolbar-divider);
  --vm-color-toolbar-icon-strong: var(--vm-color-text-primary);
  --vm-color-toolbar-action: var(--vm-accent);
  --vm-color-toolbar-action-outline: var(--vm-accent-outline);
  --vm-color-toolbar-tooltip-shadow: var(--vm-shadow-soft);

  /* Auxiliary panels */
  --vm-color-panel-border-strong: var(--vm-color-border-strong);
  --vm-color-periodic-grad-a: #182334;
  --vm-color-periodic-grad-b: var(--vm-dark-900);
  --vm-color-periodic-grad-c: #0c121c;

  /* Toolbar text hierarchy */
  --vm-color-toolbar-text-primary: var(--vm-color-text-primary);
  --vm-color-toolbar-text-strong: var(--vm-color-text-primary);
  --vm-color-toolbar-text-subtle: var(--vm-color-text-secondary);
  --vm-color-toolbar-text-emphasis: var(--vm-color-text-primary);
  --vm-color-toolbar-text-tooltip: var(--vm-color-text-main);
  --vm-color-toolbar-text-meta-key: var(--vm-color-text-label);
  --vm-color-toolbar-text-meta-empty: var(--vm-color-text-muted);
  --vm-color-toolbar-text-chip: var(--vm-color-on-control);
  --vm-color-toolbar-text-chip-muted: var(--vm-color-on-control-dim);
  --vm-color-toolbar-text-code: var(--vm-color-text-primary);
  --vm-color-toolbar-text-inverse: var(--vm-color-on-control);

  /* Mode tabs */
  --vm-color-toolbar-tab-fg: var(--vm-color-text-secondary);
  --vm-color-toolbar-tab-fg-hover: var(--vm-color-text-primary);
  --vm-color-toolbar-tab-fg-active: var(--vm-brand-accent);
  --vm-color-toolbar-tab-accent: #0c3575;

  /* Onboarding / splash card */
  --vm-color-splash-card-fg: #0d1728;
  --vm-color-splash-card-bg: var(--vm-color-surface-panel);
  --vm-color-splash-card-border: var(--vm-color-border-subtle);
  --vm-color-splash-card-shadow: rgba(15, 20, 30, 0.10);
  --vm-color-splash-version: #667c99;
  --vm-color-splash-drop-border: var(--vm-color-border-subtle);
  --vm-color-splash-drop-bg: var(--vm-color-surface-base);
  --vm-color-splash-drop-fg: #31435d;
  --vm-color-splash-drop-code-bg: var(--vm-color-surface-base);
  --vm-color-splash-drop-code-border: var(--vm-color-border-subtle);
  --vm-color-splash-drop-code-fg: #274363;
  --vm-color-splash-drop-icon: #4a6d9b;
  --vm-color-splash-cta-bg: #0c3575;
  --vm-color-splash-cta-fg: var(--vm-color-white);
  --vm-color-splash-link: var(--vm-color-accent);
  --vm-color-splash-meta: #516986;

  /* Top-right utility overlay */
  --vm-color-utility-overlay-fg: rgba(66, 72, 82, 0.86);
  --vm-color-utility-overlay-fg-hover: rgba(34, 38, 45, 0.98);
  --vm-color-utility-overlay-shadow: rgba(255, 255, 255, 0.55);
  --vm-color-utility-overlay-glow: rgba(255, 255, 255, 0.2);
}

:root[data-theme='dark'] {
  --vm-neutral-050: #111722;
  --vm-neutral-150: #182130;
  --vm-neutral-250: #29384c;
  --vm-neutral-400: #8a96a8;
  --vm-neutral-600: #d3dbe8;

  --vm-accent: var(--vm-color-accent-primary);
  --vm-accent-soft: var(--vm-color-accent-primary-soft);
  --vm-accent-outline: var(--vm-color-accent-outline);

  --vm-dark-900: var(--vm-color-surface-base);
  --vm-shadow-soft: rgba(0, 0, 0, 0.34);

  --vm-color-white: #ffffff;
  --vm-color-bg-main: var(--vm-color-surface-base);
  --vm-color-bg-panel: var(--vm-color-surface-panel);
  --vm-color-text-main: var(--vm-color-text-primary);

  --vm-color-toolbar-bg: var(--vm-color-surface-base);
  --vm-color-toolbar-border: var(--vm-color-border);
  --vm-color-toolbar-divider: var(--vm-color-toolbar-border);
  --vm-color-toolbar-control-bg: var(--vm-color-surface-panel);
  --vm-color-toolbar-control-bg-hover: color-mix(in srgb, var(--vm-color-surface-panel) 78%, var(--vm-color-surface-raised));
  --vm-color-toolbar-button-bg: var(--vm-color-surface-control);
  --vm-color-toolbar-input-bg: var(--vm-color-surface-panel);
  --vm-color-toolbar-input-border: var(--vm-color-border-input);
  --vm-color-toolbar-tooltip-bg: var(--vm-color-surface-control);
  --vm-color-toolbar-section-divider: var(--vm-color-toolbar-divider);
  --vm-color-toolbar-icon-strong: var(--vm-color-text-primary);
  --vm-color-toolbar-action: var(--vm-accent);
  --vm-color-toolbar-action-outline: var(--vm-accent-outline);
  --vm-color-toolbar-tooltip-shadow: rgba(0, 0, 0, 0.4);

  --vm-color-panel-border-strong: var(--vm-color-border-strong);
  --vm-color-periodic-grad-a: #152031;
  --vm-color-periodic-grad-b: #101722;
  --vm-color-periodic-grad-c: #0b1018;

  --vm-color-toolbar-text-primary: #c8d2df;
  --vm-color-toolbar-text-strong: #e7edf7;
  --vm-color-toolbar-text-subtle: #97a6ba;
  --vm-color-toolbar-text-emphasis: #edf3fc;
  --vm-color-toolbar-text-tooltip: #f3f7ff;
  --vm-color-toolbar-text-meta-key: #b7c4d4;
  --vm-color-toolbar-text-meta-empty: #8291a4;
  --vm-color-toolbar-text-chip: var(--vm-color-on-control);
  --vm-color-toolbar-text-chip-muted: var(--vm-color-on-control-dim);
  --vm-color-toolbar-text-code: #dce5f1;
  --vm-color-toolbar-text-inverse: var(--vm-color-on-control);

  --vm-color-toolbar-tab-fg: #a3b1c4;
  --vm-color-toolbar-tab-fg-hover: #d6deea;
  --vm-color-toolbar-tab-fg-active: #edf3fc;
  --vm-color-toolbar-tab-accent: #6b9bff;

  --vm-color-splash-card-fg: #eaf1fb;
  --vm-color-splash-card-bg: var(--vm-color-surface-panel);
  --vm-color-splash-card-border: var(--vm-color-border-subtle);
  --vm-color-splash-card-shadow: rgba(0, 0, 0, 0.34);
  --vm-color-splash-version: #9eb0c7;
  --vm-color-splash-drop-border: var(--vm-color-border-subtle);
  --vm-color-splash-drop-bg: var(--vm-color-surface-base);
  --vm-color-splash-drop-fg: #dbe6f5;
  --vm-color-splash-drop-code-bg: var(--vm-color-surface-panel);
  --vm-color-splash-drop-code-border: var(--vm-color-border-subtle);
  --vm-color-splash-drop-code-fg: #d8e7fb;
  --vm-color-splash-drop-icon: #83a7d9;
  --vm-color-splash-cta-bg: #6b9bff;
  --vm-color-splash-link: var(--vm-color-accent);
  --vm-color-splash-meta: #aab9cc;

  --vm-color-utility-overlay-fg: rgba(228, 234, 242, 0.9);
  --vm-color-utility-overlay-fg-hover: rgba(255, 255, 255, 1);
  --vm-color-utility-overlay-shadow: rgba(0, 0, 0, 0.36);
  --vm-color-utility-overlay-glow: rgba(0, 0, 0, 0.2);
}