:root {
  --background: 30 15% 98%;
  --foreground: 25 25% 12%;
  --card: 0 0% 100%;
  --card-foreground: 25 25% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 25 25% 12%;
  --primary: 24 95% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 30 20% 93%;
  --secondary-foreground: 25 25% 12%;
  --muted: 30 15% 92%;
  --muted-foreground: 25 10% 45%;
  --accent: 32 90% 95%;
  --accent-foreground: 24 95% 38%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 30 15% 88%;
  --input: 30 15% 88%;
  --ring: 24 95% 46%;
  --radius: 0.75rem;
}

.dark {
  --background: 240 10% 4%;
  --foreground: 0 0% 98%;
  --card: 240 10% 4%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 4%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 6% 10%;
  --secondary: 240 4% 16%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 4% 16%;
  --muted-foreground: 240 5% 65%;
  --accent: 240 4% 16%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 4% 16%;
  --input: 240 4% 16%;
  --ring: 240 5% 84%;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}