:root {
  color-scheme: light;
  --color-navy: #071b3f;
  --color-navy-2: #0b2a64;
  --color-green: #13a86b;
  --color-green-dark: #087949;
  --color-green-soft: #eaf8f1;
  --color-danger: #e8495d;
  --color-danger-dark: #c92f45;
  --color-danger-soft: #fff0f2;
  --color-warning: #c98900;
  --color-warning-soft: #fff7df;
  --color-text: #24344d;
  --color-muted: #687484;
  --color-muted-2: #8a929d;
  --color-bg: #f3f7f5;
  --color-surface: #ffffff;
  --color-soft: #f3f6f5;
  --color-line: #e4ebe7;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-xs: 0 4px 14px rgba(8, 24, 47, .04);
  --shadow-sm: 0 7px 22px rgba(8, 24, 47, .055);
  --shadow-md: 0 12px 34px rgba(8, 24, 47, .07);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --control-height-sm: 40px;
  --control-height-md: 48px;
  --control-height-lg: 56px;
  --page-max-width: 640px;
  --page-padding: clamp(14px, 3vw, 24px);
  --topbar-height: 82px;
  --bottom-nav-height: 78px;

  /* Backward-compatible aliases used by legacy customer components. */
  --customer-shell-ink: var(--color-navy);
  --customer-shell-muted: var(--color-muted-2);
  --customer-shell-line: var(--color-line);
}