/* ============================================================
   MAVORA Design System — v64 overlay
   现代极简·高级感 polish layer (loaded last, unlayered => wins over Tailwind v4 layers)
   Rollback: remove <link> injection + delete this file
   ============================================================ */

/* --- 0. Tokens: contrast discipline & subtle polish (unlayered :root wins) --- */
:root {
  --text-muted: #6d675d;              /* #756f66 was ~4.2:1; now ~4.7:1 on warm-white */
  --stone-grey: #d2cac0;              /* slightly deepened hairline */
  --muted-bronze: #9a7849;            /* +2% contrast on warm-white for interactive text */
}

/* --- 1. Base rendering --- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- 2. Typography hierarchy (element-level, safe: single h1 per page) --- */
h1 {
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h2 {
  line-height: 1.16;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h3 {
  line-height: 1.24;
  text-wrap: balance;
  overflow-wrap: break-word;
}
p {
  line-height: 1.62;
  text-wrap: pretty;
}
.font-mono,
[class*="font-mono"] {
  font-variant-numeric: tabular-nums;
}

/* Display scale: hero/display headings gain presence (min 40 / ~53 @1440 / cap 60) */
@media (min-width: 640px) {
  h1 { font-size: clamp(2.5rem, 1.4rem + 2.1vw, 3.75rem); }
}
@media (max-width: 639px) {
  h1 { font-size: clamp(2.15rem, 5.4vw + 1rem, 2.6rem); }
}

/* --- 3. Layout rhythm --- */
/* Top announcement bar: single centered message (hide mirrored right span) */
header .h-9 > span.text-white\/72 { display: none; }
header .h-9 > a {
  margin-inline: auto;
  letter-spacing: 0.18em;
}

/* Footer breathing room on desktop (copyright row safe-zone already mobile) */
@media (min-width: 1024px) {
  .lg\:pb-5 { padding-bottom: 2.75rem; }
}

/* --- 4. Component texture (sharp corners stay) --- */
/* Images get a hairline to sit cleanly on warm-white */
main img {
  border: 1px solid rgba(24, 20, 16, 0.08);
}

/* Product / room cards: hover lift + slow transition on named properties */
article.group,
div.group {
  transition: box-shadow 0.2s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
article.group:hover img,
div.group:hover img {
  border-color: rgba(24, 20, 16, 0.16);
  box-shadow: 0 24px 48px -28px rgba(36, 35, 31, 0.32);
  transform: translateY(-2px);
}
main img {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Buttons & links: unified named-property transitions */
a,
button {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}
button:not(:disabled):active {
  transform: scale(0.97);
}

/* --- 5. Color discipline --- */
/* WhatsApp float: brand charcoal instead of platform green; white icon/label stay */
.mavora-wa {
  background: #24231f !important;
  box-shadow: 0 10px 24px -12px rgba(36, 35, 31, 0.5) !important;
}
.mavora-wa:hover {
  background: #9a7849 !important;
}
.mavora-wa-icon {
  background: #9a7849 !important;   /* bronze disc behind white glyph — kills platform green */
}
.mavora-wa-icon svg { fill: #f5f2ed !important; }

/* --- 6. Accessibility --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--muted-bronze);
  outline-offset: 2px;
}

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