/* ============================================================
   BLISSFUL MOMENTS — Design System
   Boutique luxury event styling · Dubai, UAE
   Palette (from brand logo): Ivory · Champagne Gold · Dusty Blue · Deep Navy
   Type:  Fraunces (display serif) · Jost (sans) · Ephesis (script)
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Core palette — matched to the Blissful Moments logo
     (navy monogram, dusty-blue roses, gold ring, ivory ground) */
  --ivory:        #F6F4EF;   /* soft warm white ground */
  --ivory-deep:   #ECE7DC;
  --cream:        #FBFAF6;   /* lightest cream */
  --gold:         #C2A15B;   /* logo gold ring */
  --gold-soft:    #D8C193;
  --gold-deep:    #9E7C3F;
  --blush:        #DDE4EF;   /* pale dusty-blue (was blush) */
  --blush-deep:   #B7C6DD;
  --mauve:        #7A93B7;   /* dusty steel blue (rose blue) */
  --mauve-deep:   #24406E;   /* mid navy */
  --navy:         #16294E;   /* deep navy monogram */
  --navy-deep:    #0F1D3A;
  --ink:          #17233C;   /* near-navy ink for text */
  --ink-soft:     #3C4A63;
  --line:         rgba(22, 41, 78, 0.14);

  /* Semantic */
  --bg:           var(--ivory);
  --bg-alt:       var(--cream);
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --accent:       var(--gold);

  /* Typography */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Jost', -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Ephesis', cursive;

  /* Fluid type scale */
  --step--1: clamp(0.78rem, 0.72rem + 0.28vw, 0.92rem);
  --step-0:  clamp(0.95rem, 0.90rem + 0.30vw, 1.08rem);
  --step-1:  clamp(1.20rem, 1.05rem + 0.70vw, 1.60rem);
  --step-2:  clamp(1.60rem, 1.30rem + 1.40vw, 2.60rem);
  --step-3:  clamp(2.10rem, 1.50rem + 2.90vw, 4.20rem);
  --step-4:  clamp(2.80rem, 1.60rem + 5.80vw, 7.00rem);
  --step-5:  clamp(3.40rem, 1.60rem + 8.60vw, 10.0rem);

  /* Spacing & layout */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1440px;
  --radius: 2px;

  /* Motion */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.9s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: auto; /* Lenis handles smooth scroll */
}
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  letter-spacing: 0.01em;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}
.italic { font-style: italic; }
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(4.5rem, 10vw, 10rem); }
.stack > * + * { margin-top: 1.25rem; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 1.05em;
  --pad-x: 2.4em;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 100px;
  overflow: hidden;
  transition: color 0.6s var(--ease-lux);
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-lux);
  z-index: -1;
}
.btn:hover { color: var(--cream); }
.btn:hover::before { transform: translateY(0); }
.btn--solid { background: var(--gold); color: var(--cream); border-color: var(--gold); }
.btn--solid::before { background: var(--ink); }
.btn--solid:hover { color: var(--cream); }
.btn--ghost-light { color: var(--cream); border-color: rgba(255,255,255,0.5); }
.btn--ghost-light::before { background: var(--cream); }
.btn--ghost-light:hover { color: var(--ink); }
/* High-contrast filled gold — for use over photography (hero) */
.btn--solid-gold {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 500;
  box-shadow: 0 10px 30px -12px rgba(15,29,58,0.55);
}
.btn--solid-gold::before { background: #FFFFFF; }
.btn--solid-gold:hover { color: var(--navy); }

/* ---------- Reveal / animation base states ---------- */
/* Elements get data-reveal; JS (GSAP) animates. Fallback if no JS: visible. */
[data-reveal] { will-change: transform, opacity; }
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Line-mask for headings */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Selection ---------- */
::selection { background: var(--gold); color: var(--cream); }

/* ---------- Custom scrollbar (subtle) ---------- */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--ivory-deep); }
::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }