:root {
  --color-primary: #1C1917;
  --color-secondary: #2C2825;
  --color-accent: #D4B896;
  --bg-light: #FDFCFB;
  --bg-alt: #F9F5F0;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { font-family: 'Urbanist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

::selection { background: rgba(212, 184, 150, 0.25); }

/* Button fixes */
button, .btn, [class*="btn-"], a[href="#order_form"] {
  white-space: nowrap;
  min-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

form button[type="submit"] {
  white-space: normal;
  width: 100%;
}

/* Subtle focus ring */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid rgba(212, 184, 150, 0.75);
  outline-offset: 2px;
}

/* Animations */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rotate-180 { transform: rotate(180deg); }

/* Decorative backgrounds (premium, subtle) */
.decor-grid-dots {
  background-image: radial-gradient(rgba(28, 25, 23, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
}

.decor-grid-lines {
  background-image:
    linear-gradient(rgba(28, 25, 23, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 25, 23, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

.decor-diagonal {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(212, 184, 150, 0.10),
    rgba(212, 184, 150, 0.10) 6px,
    rgba(212, 184, 150, 0.02) 6px,
    rgba(212, 184, 150, 0.02) 12px
  );
}

.decor-mesh {
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(212, 184, 150, 0.16), transparent 60%),
    radial-gradient(800px 380px at 95% 35%, rgba(212, 184, 150, 0.12), transparent 55%),
    radial-gradient(700px 360px at 40% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
}

.decor-gradient-blur::before,
.decor-gradient-blur::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 520px;
  height: 520px;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  transform: translateZ(0);
}

.decor-gradient-blur::before {
  top: -160px;
  left: -180px;
  background: radial-gradient(circle at center, rgba(212, 184, 150, 0.9), transparent 60%);
}

.decor-gradient-blur::after {
  bottom: -220px;
  right: -200px;
  background: radial-gradient(circle at center, rgba(212, 184, 150, 0.65), transparent 60%);
}

.decor-corner-tr::before,
.decor-corner-bl::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  background: rgba(212, 184, 150, 0.10);
  border: 1px solid rgba(212, 184, 150, 0.20);
  border-radius: 36px;
  pointer-events: none;
}

.decor-corner-tr::before { top: -90px; right: -90px; transform: rotate(18deg); }
.decor-corner-bl::before { bottom: -90px; left: -90px; transform: rotate(-16deg); }

.decor-glow-element {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 9999px;
  background: radial-gradient(circle at center, rgba(212, 184, 150, 0.30), transparent 60%);
  filter: blur(24px);
  pointer-events: none;
}

.decor-rings-svg {
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23D4B896' stroke-opacity='0.55'%3E%3Ccircle cx='450' cy='450' r='90'/%3E%3Ccircle cx='450' cy='450' r='170'/%3E%3Ccircle cx='450' cy='450' r='250'/%3E%3Ccircle cx='450' cy='450' r='330'/%3E%3Ccircle cx='450' cy='450' r='410'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 900px 900px;
}

.decor-subtle { opacity: 0.06; }
.decor-moderate { opacity: 0.10; }
.decor-bold { opacity: 0.18; }

/* Better tap targets on mobile */
@media (max-width: 640px) {
  a, button { -webkit-tap-highlight-color: transparent; }
}

/* Prevent layout shift from lucide */
i[data-lucide] { display: inline-block; vertical-align: -0.125em; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animate] { transition: none; transform: none; opacity: 1; }
}