:root {
  --background: 36 33% 97%;
  --foreground: 24 18% 16%;
  --primary: 18 54% 38%;
  --secondary: 36 42% 72%;
  --muted: 34 24% 91%;
  --destructive: 4 72% 52%;
  --border: 28 20% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 18px -14px hsla(24, 20%, 10%, 0.22);
  --shadow-md: 0 18px 40px -20px hsla(24, 26%, 10%, 0.28);
  --shadow-lg: 0 26px 60px -28px hsla(24, 30%, 10%, 0.34);
  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 24 16% 10%;
  --foreground: 34 28% 94%;
  --primary: 28 58% 58%;
  --secondary: 24 24% 26%;
  --muted: 24 14% 17%;
  --destructive: 4 78% 60%;
  --border: 24 12% 24%;
  --card: 24 14% 13%;
  --shadow-sm: 0 8px 22px -14px hsla(0, 0%, 0%, 0.5);
  --shadow-md: 0 20px 44px -20px hsla(0, 0%, 0%, 0.58);
  --shadow-lg: 0 30px 70px -28px hsla(0, 0%, 0%, 0.66);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: hsl(var(--foreground) / 0.45);
}

:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

::selection {
  background: hsl(var(--primary) / 0.22);
}