:root {
  --background: 38 45% 96%;
  --foreground: 222 31% 12%;
  --primary: 258 78% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 24 92% 62%;
  --secondary-foreground: 222 31% 12%;
  --muted: 220 18% 88%;
  --muted-foreground: 222 14% 42%;
  --destructive: 352 82% 54%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 20% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px rgba(38, 28, 70, 0.08);
  --shadow-md: 0 18px 45px rgba(38, 28, 70, 0.13);
  --shadow-lg: 0 28px 80px rgba(38, 28, 70, 0.2);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.7rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.65rem;
}

.dark {
  --background: 232 25% 9%;
  --foreground: 36 45% 94%;
  --primary: 264 86% 72%;
  --primary-foreground: 232 25% 9%;
  --secondary: 27 96% 67%;
  --secondary-foreground: 232 25% 9%;
  --muted: 232 18% 18%;
  --muted-foreground: 38 22% 72%;
  --destructive: 350 84% 64%;
  --destructive-foreground: 232 25% 9%;
  --border: 232 16% 25%;
  --card: 232 23% 13%;
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.46);
}

* { 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-fast); }
a { color: inherit; text-decoration: none; }
::selection { background: hsl(var(--primary) / 0.22); }
.focus-ring:focus-visible {
  outline: 3px solid hsl(var(--primary) / 0.35);
  outline-offset: 3px;
}
.hero-glow {
  background:
    radial-gradient(circle at 18% 20%, hsl(var(--secondary) / 0.34), transparent 30%),
    radial-gradient(circle at 82% 10%, hsl(var(--primary) / 0.28), transparent 34%),
    linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted) / 0.55));
}
.product-art {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 18%),
    linear-gradient(135deg, var(--from), var(--to));
}
.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--muted) / 0.45), hsl(var(--muted)));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.floaty { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }