:root {
  /* Semantic color tokens. Legacy aliases below keep existing components compatible. */
  --color-brand: #002f6c;
  --color-brand-strong: #071c33;
  --color-text: #172238;
  --color-text-muted: #5f6f80;
  --color-border: #d7e0e8;
  --color-surface: #fff;
  --color-surface-soft: #f8fbfe;
  --color-surface-alt: #fbfdff;
  --color-text-secondary: #425267;
  --color-brand-soft: #edf5fc;
  --color-brand-hover: #eef5fc;
  --color-brand-subtle: #f3f8fd;
  --color-brand-muted: #f4f8fc;
  --color-success: #1f7a4d;
  --color-success-soft: #f1faf5;
  --color-warning: #b26a00;
  --color-warning-strong: #8b5600;
  --color-warning-soft: #fff4dc;
  --color-warning-surface: #fffaf0;
  --color-danger: #e30613;
  --color-danger-soft: #fff5f6;

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

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-dialog: 18px;
  --radius-pill: 999px;

  --control-height: 44px;
  --touch-target: 40px;
  --shadow-card: 0 10px 28px rgba(7, 28, 51, .07);
  --shadow-dialog: 0 34px 90px rgba(7, 28, 51, .28);
  --shadow-elevated: 0 22px 58px rgba(7, 28, 51, .10);

  /* Stable aliases used by the current UI. */
  --blue: var(--color-brand);
  --red: var(--color-danger);
  --steel: var(--color-text-muted);
  --dark: var(--color-brand-strong);
  --ink: var(--color-text);
  --line: var(--color-border);
  --surface: var(--color-surface);
  --soft: var(--color-surface-soft);
  --green: var(--color-success);
  --orange: var(--color-warning);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-elevated);
  --shadow-soft: var(--shadow-card);
}