:root {
  /* Color palette */
  --brand-bg: #05070b;
  --brand-bg-secondary: #0d1421;
  --brand-surface: #1b2535;
  --brand-surface-light: #2a3649;
  --brand-white: #ffffff;
  --brand-text: #eef2f8;
  --brand-text-muted: #b4bcc9;
  --brand-pill: #555c6d;
  --brand-pill-hover: #646d81;
  --brand-pill-active: #ffffff;
  --brand-pill-active-text: #0c1626;
  --brand-border: rgba(255, 255, 255, 0.08);

  /* Borders, shadows, and transitions */
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-pill: 999px;
  --brand-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --transition-fast: 0.2s;
  --transition-base: 0.25s;
  --transition-slow: 0.3s;
}