:root {
  --color-primary: #1F2937;
  --color-secondary: #374151;
  --color-accent: #64748B;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { font-family: 'Nunito Sans', system-ui, sans-serif; }

::selection { background: rgba(100, 116, 139, 0.22); }

/* 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%;
}

a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid rgba(100, 116, 139, 0.55); outline-offset: 2px; }

/* Animations */
[data-animate] { will-change: opacity, transform; }
.anim-zoom_in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.anim-zoom_in.is-visible { opacity: 1; transform: scale(1); }

.anim-fade_up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.anim-fade_up.is-visible { opacity: 1; transform: translateY(0); }

.anim-fade_in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.anim-fade_in.is-visible { opacity: 1; }

.anim-slide_left {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.anim-slide_left.is-visible { opacity: 1; transform: translateX(0); }

.anim-slide_right {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.anim-slide_right.is-visible { opacity: 1; transform: translateX(0); }

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

/* Decorative backgrounds */
.decor-grid-dots {
  background-image: radial-gradient(rgba(100, 116, 139, 0.35) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0;
}
.decor-grid-lines {
  background-image:
    linear-gradient(to right, rgba(100, 116, 139, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 116, 139, 0.16) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center;
}
.decor-diagonal {
  background-image: repeating-linear-gradient(135deg, rgba(100,116,139,0.14) 0 1px, transparent 1px 10px);
}
.decor-mesh {
  background:
    radial-gradient(650px circle at 20% 10%, rgba(100,116,139,0.18), transparent 55%),
    radial-gradient(650px circle at 80% 30%, rgba(31,41,55,0.14), transparent 55%),
    radial-gradient(700px circle at 40% 90%, rgba(55,65,81,0.14), transparent 55%);
}

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

.decor-gradient-blur { position: relative; }
.decor-gradient-blur::before,
.decor-gradient-blur::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 420px;
  height: 420px;
  filter: blur(48px);
  opacity: 0.28;
  pointer-events: none;
  border-radius: 999px;
  z-index: 0;
}
.decor-gradient-blur::before {
  top: -160px;
  left: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(100,116,139,0.55), transparent 60%);
}
.decor-gradient-blur::after {
  bottom: -180px;
  right: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(31,41,55,0.55), transparent 60%);
}

.decor-corner-tr { position: relative; }
.decor-corner-tr::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 160px; height: 160px;
  background: radial-gradient(circle at top right, rgba(100,116,139,0.18), transparent 60%);
  pointer-events: none;
}
.decor-corner-bl { position: relative; }
.decor-corner-bl::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 160px; height: 160px;
  background: radial-gradient(circle at bottom left, rgba(100,116,139,0.18), transparent 60%);
  pointer-events: none;
}

.decor-glow-element { position: relative; }
.decor-glow-element::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(100,116,139,0.25), transparent 62%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

.decor-rings-svg {
  background-image: radial-gradient(circle at center, transparent 0 28%, rgba(100,116,139,0.18) 29%, transparent 30%),
                    radial-gradient(circle at center, transparent 0 48%, rgba(100,116,139,0.14) 49%, transparent 50%),
                    radial-gradient(circle at center, transparent 0 68%, rgba(100,116,139,0.10) 69%, transparent 70%);
}

/* Form helper */
.input-error {
  border-color: rgba(239, 68, 68, 0.65) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}
.form-error-text { color: rgb(220, 38, 38); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-zoom_in, .anim-fade_up, .anim-fade_in, .anim-slide_left, .anim-slide_right {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}