:root {
  --background: hsl(35 25% 97%);
  --foreground: hsl(25 15% 25%);
  --primary-foreground: hsl(0 0% 100%);
  --primary: hsl(201 85% 42%);
  --secondary-foreground: hsl(0 0% 100%);
  --secondary: hsl(211 79% 57%);
  --surface-foreground: hsl(25 15% 20%);
  --surface: hsl(0 0% 100%);
  --muted: hsl(35 15% 90%);
  --border: hsl(35 15% 85%);
  --muted-foreground: hsl(25 12% 50%);
  --icon-primary: hsl(0 0% 30%);
  --icon-secondary: hsl(0 0% 50%);
  --icon-on-primary: hsl(0 0% 0%);
  --icon-on-secondary: hsl(0 0% 100%);
  --hero-overlay: hsl(214 70% 44%);
}

.dark {
  --background: hsl(25 12% 12%);
  --foreground: hsl(35 8% 82%);
  --primary-foreground: hsl(0 0% 100%);
  --primary: hsl(201 85% 55%);
  --secondary-foreground: hsl(25 100% 8%);
  --secondary: hsl(214 86% 19%);
  --surface-foreground: hsl(35 8% 92%);
  --surface: hsl(25 10% 16%);
  --muted: hsl(25 8% 24%);
  --border: hsl(25 8% 26%);
  --muted-foreground: hsl(35 6% 58%);
  --icon-primary: hsl(0 0% 90%);
  --icon-secondary: hsl(0 0% 70%);
  --icon-on-primary: hsl(0 0% 0%);
  --icon-on-secondary: hsl(0 0% 100%);
  --hero-overlay: hsl(0 0% 0%);
}