:root {
  --background: 38 44% 93%;
  --foreground: 260 24% 13%;
  --primary: 332 78% 52%;
  --secondary: 183 67% 36%;
  --muted: 260 10% 43%;
  --destructive: 3 72% 50%;
  --border: 260 18% 82%;
  --card: 40 55% 98%;
  --shadow-sm: 0 4px 14px hsl(260 24% 13% / 0.08);
  --shadow-md: 0 12px 30px hsl(260 24% 13% / 0.12);
  --shadow-lg: 0 22px 55px hsl(260 24% 13% / 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 260 27% 9%;
  --foreground: 38 44% 94%;
  --primary: 332 84% 62%;
  --secondary: 183 74% 48%;
  --muted: 260 14% 70%;
  --destructive: 3 78% 60%;
  --border: 260 20% 24%;
  --card: 260 25% 14%;
  --shadow-sm: 0 4px 14px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 12px 30px hsl(0 0% 0% / 0.3);
  --shadow-lg: 0 22px 55px hsl(0 0% 0% / 0.42);
}

* {
  box-sizing: border-box;
}

html {
  background: hsl(var(--background));
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 0%, hsl(var(--primary) / 0.16), transparent 26rem),
    radial-gradient(circle at 92% 18%, hsl(var(--secondary) / 0.16), transparent 24rem),
    hsl(var(--background));
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.bg-shop-pattern {
  background-color: hsl(var(--background));
  background-image:
    linear-gradient(45deg, hsl(var(--primary) / 0.07) 25%, transparent 25%),
    linear-gradient(-45deg, hsl(var(--secondary) / 0.07) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, hsl(var(--primary) / 0.07) 75%),
    linear-gradient(-45deg, transparent 75%, hsl(var(--secondary) / 0.07) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
}

.bg-chair-gradient {
  background:
    radial-gradient(circle at center 30%, hsl(var(--primary) / 0.16), transparent 10rem),
    linear-gradient(160deg, hsl(var(--background)), hsl(var(--secondary) / 0.12));
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: hsl(var(--border));
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--card) / 0.75), transparent);
  animation: shimmer 1.25s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes bob {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}

.animate-bob {
  animation: bob 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}