:root{
  --color-primary:#1C1917;
  --color-secondary:#2C2825;
  --color-accent:#D4B896;
}

html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font-family:'Outfit',system-ui,sans-serif}
img{max-width:100%;height:auto}
::selection{background:rgba(212,184,150,.35)}

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:.5rem
}

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

[data-animate]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease-out,transform .6s ease-out
}
[data-animate].is-visible{
  opacity:1;
  transform:translateY(0)
}

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

/* Premium focus rings */
:focus-visible{
  outline:2px solid rgba(212,184,150,.9);
  outline-offset:2px
}

/* Inputs baseline (Tailwind will cover most; these help for non-tailwind inputs if present) */
input[type="text"],input[type="tel"],input[type="email"],textarea,select{
  -webkit-appearance:none;
  appearance:none
}

/* Decorative elements */
.decor-grid-dots{
  background-image:radial-gradient(rgba(28,25,23,.18) 1px,transparent 1px);
  background-size:16px 16px;
  background-position:0 0
}
.decor-grid-lines{
  background-image:
    linear-gradient(to right, rgba(28,25,23,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28,25,23,.08) 1px, transparent 1px);
  background-size:48px 48px
}
.decor-diagonal{
  background-image:repeating-linear-gradient(
    135deg,
    rgba(212,184,150,.18),
    rgba(212,184,150,.18) 8px,
    transparent 8px,
    transparent 18px
  )
}
.decor-mesh{
  background-image:
    radial-gradient(60% 60% at 20% 30%, rgba(212,184,150,.30) 0%, transparent 55%),
    radial-gradient(55% 55% at 80% 25%, rgba(255,255,255,.18) 0%, transparent 60%),
    radial-gradient(60% 60% at 75% 85%, rgba(212,184,150,.18) 0%, transparent 55%);
}

.decor-gradient-blur::before,
.decor-gradient-blur::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  filter:blur(60px);
  opacity:.35;
  pointer-events:none;
  border-radius:9999px
}
.decor-gradient-blur::before{
  left:-180px;
  top:-220px;
  background:radial-gradient(circle at 30% 30%, rgba(212,184,150,.9), transparent 60%)
}
.decor-gradient-blur::after{
  right:-220px;
  bottom:-260px;
  background:radial-gradient(circle at 30% 30%, rgba(212,184,150,.55), transparent 60%)
}

/* Intensity modifiers */
.decor-subtle{opacity:.55}
.decor-moderate{opacity:.8}
.decor-bold{opacity:1}

/* Minor layout helper */
.container-safe{
  padding-left:max(1rem, env(safe-area-inset-left));
  padding-right:max(1rem, env(safe-area-inset-right))
}

/* Mobile menu animation (class toggled via JS optional) */
#mobile-menu{
  transform-origin:top;
}
#mobile-menu.is-open{
  animation:menuDrop .18s ease-out both
}
@keyframes menuDrop{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}