:root {
  /* Backgrounds — blue-gray tinted to match navy accent */
  --color-bg-primary: #eef0f5;
  --color-bg-secondary: #e2e6ee;
  --color-bg-card: #f6f7fa;
  --color-bg-card-hover: #eceef3;
  --color-bg-dark: #162033;

  /* Text — blue-gray family */
  --color-text-primary: #162033;
  --color-text-secondary: #3d4f65;
  --color-text-muted: #6b7a8d;

  /* Accents — navy + teal, everything derived from these two */
  --color-accent-primary: #2563eb;
  --color-accent-primary-dim: #1e50c8;
  --color-accent-secondary: #0d9488;
  --color-accent-mid: #1a7fa0;

  /* Borders */
  --color-border: rgba(22, 32, 51, 0.08);
  --color-border-hover: rgba(22, 32, 51, 0.16);

  /* Typography */
  --font-mono: 'IBM Plex Mono', monospace;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --max-width: 1200px;
  --border-radius: 6px;
  --border-radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}