:root {
  --background: 27 100% 98%;
  --foreground: 328 25% 10%;
  --card: 0 0% 100%;
  --card-foreground: 328 25% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 328 25% 10%;
  --primary: 8 65% 44%;
  --primary-foreground: 27 100% 98%;
  --secondary: 29 100% 95%;
  --secondary-foreground: 328 25% 10%;
  --muted: 26 67% 92%;
  --muted-foreground: 10 11% 40%;
  --accent: 21 100% 92%;
  --accent-foreground: 328 25% 10%;
  --destructive: 357 69% 56%;
  --destructive-foreground: 27 100% 98%;
  --border: 21 40% 86%;
  --input: 21 40% 86%;
  --ring: 336 65% 57%;
}
:root.dark {
  --background: 328 25% 10%;
  --foreground: 27 100% 98%;
  --card: 330 19% 14%;
  --card-foreground: 27 100% 98%;
  --popover: 330 19% 14%;
  --popover-foreground: 27 100% 98%;
  --primary: 14 88% 55%;
  --primary-foreground: 328 25% 10%;
  --secondary: 2 30% 22%;
  --secondary-foreground: 27 100% 98%;
  --muted: 0 22% 19%;
  --muted-foreground: 17 38% 82%;
  --accent: 1 35% 26%;
  --accent-foreground: 29 100% 95%;
  --destructive: 359 100% 70%;
  --destructive-foreground: 328 25% 10%;
  --border: 358 22% 29%;
  --input: 358 22% 29%;
  --ring: 336 65% 57%;
}
body {
  font-family: "Space Grotesk", "Source Sans 3", system-ui, sans-serif;
}
.header {
  border-bottom: 1px solid hsl(var(--border));
}