:root {
  --background: 35 38% 96%;
  --foreground: 218 28% 14%;
  --primary: 18 92% 54%;
  --primary-foreground: 0 0% 100%;
  --secondary: 172 54% 42%;
  --secondary-foreground: 0 0% 100%;
  --muted: 34 22% 88%;
  --muted-foreground: 218 12% 43%;
  --destructive: 355 78% 54%;
  --destructive-foreground: 0 0% 100%;
  --border: 32 21% 82%;
  --card: 0 0% 100%;
  --card-foreground: 218 28% 14%;
  --shadow-sm: 0 6px 18px rgba(39, 30, 20, 0.08);
  --shadow-md: 0 18px 45px rgba(39, 30, 20, 0.12);
  --shadow-lg: 0 30px 80px rgba(39, 30, 20, 0.18);
  --transition-fast: 150ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.7rem;
}

.dark {
  --background: 220 28% 8%;
  --foreground: 36 38% 94%;
  --primary: 18 92% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 172 52% 48%;
  --secondary-foreground: 220 28% 8%;
  --muted: 219 24% 16%;
  --muted-foreground: 36 14% 68%;
  --destructive: 355 78% 61%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 18% 24%;
  --card: 220 25% 12%;
  --card-foreground: 36 38% 94%;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a, input, select { transition: var(--transition-smooth); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid hsl(var(--primary) / 0.35);
  outline-offset: 3px;
}
.hero-grid {
  background-image: radial-gradient(circle at 20% 15%, hsl(var(--primary) / 0.22), transparent 28%), radial-gradient(circle at 80% 10%, hsl(var(--secondary) / 0.2), transparent 26%), linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted) / 0.6));
}
.product-art {
  background: radial-gradient(circle at 35% 30%, hsl(var(--primary) / 0.32), transparent 32%), radial-gradient(circle at 70% 72%, hsl(var(--secondary) / 0.25), transparent 34%), linear-gradient(135deg, hsl(var(--muted)), hsl(var(--card)));
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }