:root,
:root[data-theme="dark"] {
  --grey50: #14191f;
  --grey100: #191f26;
  --grey200: #1e252d;
  --grey400: #2a323c;
  --grey700: #5c6773;

  /* Blue-led accent (stocks / chrome), higher saturation than the muted pass */
  --error: #f06464;
  --warning: #e8ad45;
  --success: #45c878;
  --info: #5aa8e8;
  --primary: #5b9fe8;
  --secondary: #4a8fd4;
  --accent: #5b9fe8;

  /* Lifted charcoal — avoid near-black so dark mode feels less harsh */
  --background: #14191f;
  --surface: #1e252d;
  --surfaceRaised: #262e38;
  --lighterBack: #1e252d;
  --border: rgba(255, 255, 255, 0.08);
  --textPrimary: #e8eef2;
  --textMuted: #8b98a5;
  --textSecondary: #b6c0c9;
  --textDisabled: #5c6773;
  --hover: rgba(91, 159, 232, 0.16);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --font-ui: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

:root[data-theme="light"] {
  --primary: #3b7dd6;
  --secondary: #2f6bc4;
  --accent: #3b7dd6;
  --error: #dc5252;
  --warning: #d97706;
  --info: #0284c7;
  --success: #16a34a;

  /* Soft cool grays — avoid pure #fff so the UI feels less harsh */
  --background: #d8dde3;
  --surface: #f3f5f8;
  --surfaceRaised: #f7f9fb;
  --lighterBack: #f3f5f8;
  --border: rgba(15, 23, 42, 0.1);
  --textPrimary: #0f172a;
  --textSecondary: #475569;
  --textMuted: #475569;
  --textDisabled: #94a3b8;
  --hover: rgba(59, 125, 214, 0.1);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
  --font-ui: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

body {
  background-color: var(--background);
  color: var(--textPrimary);
}