/* Villa Dolce Vita — Common Stylesheet v1.1
   Shared across ALL pages for design consistency.
   Page-specific styles remain inline in each HTML file. */

/* ─── UNIFIED DESIGN TOKENS ────────────────────────────────────
   Subpages originally used --obsidian/#020202 and --gold:#B8975A.
   We alias them to the index.html palette for consistency.       */

:root {
  --obsidian: #0E0E0C;
  --slate: #1E1E1B;
  --warm: #2A2926;
  --gold: #B8975A;
  --gold-light: #D4B06A;
  --gold-glow: rgba(184,151,90,0.15);
  --champagne: #D4C9B8;
  --cream: #E8E0D4;
  --ivory: #F7F4EF;
  --muted: #8A8578;
  --sand: #B8AD9E;
  --black: #0E0E0C;
  --dark: #161614;
  --fh: 'Cormorant Garamond', Georgia, serif;
  --fb: 'DM Sans', -apple-system, sans-serif;
  --eo: cubic-bezier(0.16, 1, 0.3, 1);
  --es: cubic-bezier(0.34, 1.56, 0.64, 1);
  --em: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-ivory {
  --obsidian: #181D14;
  --slate: #1E2419;
  --warm: #2E3726;
  --champagne: #C4BAA5;
  --cream: #A89E8A;
  --ivory: #E4DBC8;
  --muted: #7D7A6A;
  --sand: #9E978A;
  --black: #181D14;
  --dark: #1E2419;
}

/* ─── NOISE TEXTURE OVERLAY ─────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── MOBILE STICKY CTA ─────────────────────────────────────── */
.mb {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 997;
  padding: 14px 52px;
  background: rgba(184,151,90,0.12);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  color: var(--gold);
  font-family: var(--fb);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(184,151,90,0.2);
  cursor: pointer;
  box-shadow: 0 8px 40px rgba(14,14,12,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  border-radius: 50px;
  transition: all 0.4s var(--em);
  text-decoration: none;
}
.mb:hover {
  border-color: rgba(184,151,90,0.4);
  box-shadow: 0 12px 44px rgba(184,151,90,0.12);
  transform: translateX(-50%) translateY(-2px);
}
body.theme-ivory .mb {
  background: rgba(30,36,25,0.5);
  border-color: rgba(184,151,90,0.2);
}
@media (max-width: 768px) {
  .mb { display: block; }
}

/* ─── FOCUS VISIBLE (Accessibility) ──────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}

/* ─── SKIP TO CONTENT LINK (Accessibility) ───────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  padding: 12px 24px;
  background: var(--gold);
  color: var(--obsidian);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}

/* ─── SELECTION ──────────────────────────────────────────────── */
::selection {
  background: var(--gold);
  color: var(--obsidian);
}