:root {
  --font-family-base: Helvetica, sans-serif;

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

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --color-bg-top: #031424;
  --color-bg-bottom: #05101d;
  --color-bg-app: #051e37;
  --color-bg-app-strong: #04172b;
  --color-bg-shell: #06233f;
  --color-surface-field: #323539;
  --color-surface-field-hover: #3a3e43;
  --color-surface-overlay: rgba(255, 255, 255, 0.06);
  --color-surface-overlay-strong: rgba(255, 255, 255, 0.08);
  --color-border-soft: rgba(255, 255, 255, 0.08);
  --color-border-medium: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-text-primary: #f5f7fa;
  --color-text-bright: #e8e8ea;
  --color-text-secondary: rgba(245, 247, 250, 0.7);
  --color-text-muted: rgba(232, 232, 234, 0.78);
  --color-text-placeholder: rgba(245, 247, 250, 0.45);
  --color-accent: #ff6600;
  --color-accent-hover: #e55c00;
  --color-accent-soft: rgba(255, 102, 0, 0.28);
  --color-accent-focus: rgba(255, 102, 0, 0.45);
  --color-brand-blue: #0071d9;
  --color-brand-blue-hover: #2a8ae3;
  --color-brand-blue-pressed: #005bb0;
  --color-brand-blue-muted: #35506b;

  --surface-base: var(--color-bg-app);
  --surface-base-strong: var(--color-bg-app-strong);
  --surface-panel: linear-gradient(180deg, rgba(4, 23, 43, 0.92), rgba(5, 30, 55, 0.98));
  --surface-panel-solid: rgba(5, 30, 55, 0.98);
  --surface-card: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  --surface-card-solid: rgba(255, 255, 255, 0.05);
  --surface-card-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  --surface-interactive: rgba(255, 255, 255, 0.08);
  --surface-interactive-hover: rgba(255, 255, 255, 0.12);
  --surface-interactive-strong: rgba(255, 255, 255, 0.14);
  --surface-interactive-inset: rgba(255, 255, 255, 0.04);
  --surface-elevated: rgba(255, 255, 255, 0.1);
  --surface-accent: rgba(255, 102, 0, 0.18);
  --surface-accent-muted: rgba(255, 102, 0, 0.08);
  --surface-brand: rgba(0, 113, 217, 0.95);
  --surface-brand-muted: rgba(42, 138, 227, 0.3);

  --border-panel: var(--color-border-soft);
  --border-card: var(--color-border-medium);
  --border-interactive: var(--color-border-strong);
  --border-accent: rgba(255, 102, 0, 0.35);
  --border-accent-soft: rgba(255, 102, 0, 0.16);
  --border-brand-soft: rgba(151, 215, 255, 0.34);

  /* Legacy aliases for existing component styles. */
  --bg-top: var(--color-bg-top);
  --bg-bottom: var(--color-bg-bottom);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --field-bg: var(--color-surface-field);
  --accent: var(--color-accent);
  --accent-soft: var(--color-accent-soft);
  --button-blue: var(--color-brand-blue);
  --button-blue-hover: var(--color-brand-blue-hover);

  --dark-blue: var(--color-bg-app);
  --darker-blue: var(--color-bg-app-strong);
  --blue: var(--color-brand-blue);
  --blue-hover: var(--color-brand-blue-hover);
  --blue-pressed: var(--color-brand-blue-pressed);
  --grey: var(--color-surface-field);
  --grey-soft: var(--color-border-soft);
  --light-grey: #eee;
  --text-bright: var(--color-text-bright);
  --accent-color: var(--color-accent);
  --focus-ring: var(--color-accent-focus);

  --space-2xs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-5);
}