/* Core Theme Variables extracted for modularity */
:root {
  --color-bg:#0d0d0f;
  --color-surface:#141417;
  --color-surface-alt:#1d1d22;
  --color-accent:#d4af37;
  --color-accent-hover:#c19a2f;
  --color-text:#e9e9ec;
  --color-text-muted:#a5a7ad;
  --radius-sm:4px;
  --radius-md:8px;
  --shadow-sm:0 2px 4px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px -4px rgba(0,0,0,.6);
  --transition:0.35s cubic-bezier(.4,.18,.2,1);
  --font-base:'Poppins', Arial, sans-serif;
  --font-display:'Playfair Display', serif;
  --font-size-xs: clamp(0.68rem, 0.55vw + 0.55rem, 0.75rem);
  --font-size-sm: clamp(0.78rem, 0.6vw + 0.62rem, 0.85rem);
  --font-size-base: clamp(0.92rem, 0.5vw + 0.76rem, 1rem);
  --font-size-md: clamp(1.05rem, 1vw + 0.7rem, 1.25rem);
  --font-size-lg: clamp(1.4rem, 1.6vw + 1rem, 1.85rem);
  --font-size-xl: clamp(2.1rem, 2.6vw + 1.4rem, 2.8rem);
  --font-size-xxl: clamp(2.6rem, 4vw + 1.4rem, 3.6rem);
  --lux-gradient-gold: linear-gradient(92deg,var(--color-accent) 0%,#f7e7b5 70%);
  --lux-gradient-gloss: linear-gradient(135deg,rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 65%);
  --lux-card-bg: linear-gradient(145deg,rgba(20,20,24,.92) 0%, rgba(28,28,32,.92) 100%);
  --lux-border-gold: linear-gradient(90deg,rgba(212,175,55,.9),rgba(247,231,181,.55));
  --lux-timing: cubic-bezier(.16,.7,.3,1);
  /* Heading gradient (dark default: gold) */
  --lux-heading-gradient: linear-gradient(90deg,var(--color-accent) 0%,#f7e7b5 70%);
  /* Light mode heading gradient (keeps luxury feel with deeper contrast) */
  --lux-heading-gradient-light: linear-gradient(90deg,#b0851d 0%, #d4af37 40%, #8a6a14 85%);
}
/* Light Mode Overrides */
body[data-theme="light"] {
  --color-bg:#fafafa;
  --color-surface:#ffffff;
  --color-surface-alt:#f2f2f4;
  --color-text:#222325;
  --color-text-muted:#5b5e63;
  --shadow-sm:0 2px 4px rgba(0,0,0,.12);
  --shadow-md:0 6px 18px -4px rgba(0,0,0,.18);
  /* Use stronger gold gradient for headings on light to ensure readability */
  --lux-heading-gradient: var(--lux-heading-gradient-light);
}

  /* Mobile header layout: center nav-toggle between logo and theme toggle */
  @media (max-width: 600px) {
    .site-header .container {
  display: flex !important;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }
    .site-header .branding {
      order: 1;
      flex: 1 1 0;
      display: flex;
      justify-content: flex-start;
    }
    .site-header .nav-toggle {
      order: 2;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }
    .site-header .header-actions {
      order: 3;
      flex: 1 1 0;
      display: flex;
      justify-content: flex-end;
    }
    .site-header .primary-nav {
      /* Keep layout available for off-canvas transform in `style.css`.
         The nav is hidden by transform there (translateX(110%)).
         Using display:flex here allows JS to toggle the `.open` state
         and the existing transforms to animate the panel into view. */
      display: flex;
      flex-direction: column;
    }
  }