:root {
  --background: 216 20% 95%;
  --foreground: 223 17% 8%;
  --card: 0 0% 100%;
  --card-foreground: 223 17% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 223 17% 8%;
  --primary: 7 100% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 218 21% 93%;
  --secondary-foreground: 223 17% 8%;
  --muted: 218 21% 93%;
  --muted-foreground: 220 23% 28%;
  --accent: 214 95% 93%;
  --accent-foreground: 221 83% 53%;
  --destructive: 21 90% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 18% 83%;
  --input: 0 0% 100%;
  --ring: 7 100% 46%;
  --radius: 0.5rem;
}

.dark {
  --background: 216 28% 7%;
  --foreground: 0 0% 100%;
  --card: 218 27% 12%;
  --card-foreground: 0 0% 100%;
  --popover: 218 27% 12%;
  --popover-foreground: 0 0% 100%;
  --primary: 7 100% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 218 29% 16%;
  --secondary-foreground: 0 0% 100%;
  --muted: 218 29% 16%;
  --muted-foreground: 222 23% 64%;
  --accent: 214 52% 25%;
  --accent-foreground: 213 94% 68%;
  --destructive: 27 96% 61%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 29% 25%;
  --input: 218 29% 16%;
  --ring: 7 100% 46%;
  --radius: 0.5rem;
}