:root {
  --background: 210 30% 95%;
  --foreground: 222 34% 15%;
  --card: 210 33% 98%;
  --card-foreground: 222 34% 15%;
  --popover: 210 33% 98%;
  --popover-foreground: 222 34% 15%;
  --primary: 191 78% 33%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 24% 90%;
  --secondary-foreground: 222 28% 21%;
  --muted: 210 20% 91%;
  --muted-foreground: 215 16% 36%;
  --accent: 196 58% 90%;
  --accent-foreground: 197 70% 22%;
  --destructive: 0 73% 52%;
  --destructive-foreground: 0 0% 98%;
  --border: 214 22% 83%;
  --input: 214 22% 83%;
  --ring: 191 78% 33%;
  --chart-1: 191 78% 33%;
  --chart-2: 160 64% 38%;
  --chart-3: 217 76% 55%;
  --chart-4: 35 86% 52%;
  --chart-5: 336 70% 53%;
  --radius: 0.9rem;
  --sidebar: 210 25% 96%;
  --sidebar-background: 210 25% 96%;
  --sidebar-foreground: 222 30% 17%;
  --sidebar-primary: 191 78% 33%;
  --sidebar-primary-foreground: 210 40% 98%;
  --sidebar-accent: 210 20% 90%;
  --sidebar-accent-foreground: 222 28% 19%;
  --sidebar-border: 214 20% 84%;
  --sidebar-ring: 191 78% 33%;
}

.dark {
  /* Background: near-black with subtle navy (#0d1017) */
  --background: 222 28% 7%;
  --foreground: 195 40% 96%;
  /* Card: clearly visible dark gray (#1f242d) — 8% lightness gap vs background */
  --card: 220 18% 15%;
  --card-foreground: 195 40% 96%;
  --popover: 220 18% 15%;
  --popover-foreground: 195 40% 96%;
  --primary: 185 84% 56%;
  --primary-foreground: 210 46% 8%;
  --secondary: 220 16% 19%;
  --secondary-foreground: 195 40% 96%;
  --muted: 220 16% 17%;
  --muted-foreground: 200 18% 62%;
  --accent: 220 20% 21%;
  --accent-foreground: 191 90% 90%;
  --destructive: 0 63% 46%;
  --destructive-foreground: 0 0% 98%;
  /* Border: clearly visible (#363f4e) */
  --border: 218 18% 26%;
  --input: 218 18% 26%;
  --ring: 185 84% 56%;
  --chart-1: 185 84% 56%;
  --chart-2: 161 74% 44%;
  --chart-3: 217 87% 66%;
  --chart-4: 35 92% 56%;
  --chart-5: 336 82% 64%;
  /* Sidebar: slightly different from background (#0f1520) */
  --sidebar: 222 28% 9%;
  --sidebar-background: 222 28% 9%;
  --sidebar-foreground: 195 40% 96%;
  --sidebar-primary: 185 84% 56%;
  --sidebar-primary-foreground: 210 46% 8%;
  --sidebar-accent: 218 18% 22%;
  --sidebar-accent-foreground: 195 40% 96%;
  --sidebar-border: 218 18% 18%;
  --sidebar-ring: 185 84% 56%;
}