:root {
  color-scheme: light;
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --muted: 214 32% 91%;
  --muted-foreground: 215 20% 45%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 10%;
  --border: 214 32% 91%;
  --input: 214 32% 87%;
  --ring: 201 96% 32%;
  --primary: 201 96% 32%;
  --primary-foreground: 210 40% 98%;
  --secondary: 222 43% 96%;
  --secondary-foreground: 222 47% 11%;
  --accent: 201 96% 46%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --shadow-glow: rgba(14, 165, 233, 0.35);
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: 222 47% 5%;
  --foreground: 210 40% 98%;
  --muted: 215 20% 16%;
  --muted-foreground: 218 11% 65%;
  --card: 222 40% 7%;
  --card-foreground: 210 40% 96%;
  --border: 217 28% 13%;
  --input: 217 28% 18%;
  --ring: 201 100% 50%;
  --primary: 201 100% 50%;
  --primary-foreground: 210 40% 98%;
  --secondary: 223 47% 12%;
  --secondary-foreground: 210 40% 96%;
  --accent: 201 100% 50%;
  --accent-foreground: 222 47% 5%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;
  --shadow-glow: rgba(14, 165, 233, 0.45);
}

[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --background: 222 47% 5%;
    --foreground: 210 40% 98%;
    --muted: 215 20% 16%;
    --muted-foreground: 218 11% 65%;
    --card: 222 40% 7%;
    --card-foreground: 210 40% 96%;
    --border: 217 28% 13%;
    --input: 217 28% 18%;
    --ring: 201 100% 50%;
    --primary: 201 100% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 223 47% 12%;
    --secondary-foreground: 210 40% 96%;
    --accent: 201 100% 50%;
    --accent-foreground: 222 47% 5%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 210 40% 98%;
    --shadow-glow: rgba(14, 165, 233, 0.45);
  }
}