@layer base {
  :root {
    --background: 35 25% 97%;
    --foreground: 20 20% 12%;
    --card: 0 0% 100%;
    --card-foreground: 20 20% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 20% 12%;
    --primary: 24 90% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 35 30% 90%;
    --secondary-foreground: 20 20% 15%;
    --muted: 35 20% 92%;
    --muted-foreground: 20 10% 42%;
    --accent: 28 85% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 35 20% 86%;
    --input: 35 20% 86%;
    --ring: 24 90% 48%;
    --radius: 0.625rem;
  }

  .dark {
    --background: 20 20% 10%;
    --foreground: 35 20% 92%;
    --card: 20 18% 14%;
    --card-foreground: 35 20% 92%;
    --popover: 20 18% 14%;
    --popover-foreground: 35 20% 92%;
    --primary: 24 85% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 20 15% 20%;
    --secondary-foreground: 35 20% 90%;
    --muted: 20 15% 18%;
    --muted-foreground: 35 10% 65%;
    --accent: 28 80% 50%;
    --accent-foreground: 0 0% 100%;
    --border: 20 15% 22%;
    --input: 20 15% 22%;
    --ring: 24 85% 52%;
  }
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  scroll-behavior: smooth;
}