@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap');

:root {
  /* ── Brand palette (luxury hospitality spec) ── */
  --bg-ivory:        #FAF8F5;
  --bg-dark:         #1A1A1A;
  --bg-sandstone:    #E8DCC8;
  --bg-glass:        rgba(250, 248, 245, 0.06);

  /* ── Gold accent ── */
  --gold:            #C9A84C;
  --gold-light:      #E8C96A;
  --gold-hairline:   rgba(201, 168, 76, 0.25);
  --gold-glow:       rgba(201, 168, 76, 0.12);

  /* ── Heritage Accent ─────────────── */
  --red-jaisalmer:   #8B2635;   /* Rajasthani ochre red — badges, hover, accents */
  --red-light:       rgba(139, 38, 53, 0.08);

  /* ── Text ────────────────────────── */
  --text-primary:    #3D2B1F;   /* warm dark brown — NOT pure black */
  --text-secondary:  #6B5B3E;   /* antique wood — muted body text */
  --text-muted:      #9A8A75;   /* captions, labels */
  --text-on-dark:    #FAF8F5;
  --text-gold:       #C9A84C;

  /* ── Borders ─────────────────────── */
  --border-gold:     1px solid rgba(184, 137, 42, 0.25);
  --border-sand:     1px solid #C8B89A;
  --border-dark:     1px solid rgba(245, 240, 232, 0.1);

  /* ── Legacy Variable Aliases ──────── */
  --color-bg:            var(--bg-ivory);
  --color-dark:          var(--bg-dark);
  --color-gold:          var(--gold);
  --color-gold-light:    var(--gold-light);
  --color-sand:          var(--bg-sandstone);
  --color-glass:         var(--bg-glass);
  --color-offwhite:      var(--bg-ivory);
  --color-charcoal:      var(--bg-dark);
  --color-text-body:     var(--text-secondary);
  --color-border-muted:  var(--gold-hairline);

  /* ── Spacing (do not change) ──────── */
  --section-padding-desktop: 120px 0;
  --section-padding-mobile:  64px 0;

  /* ── Typography Scale and Fonts ── */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-heading: var(--font-display);
  --transition-luxury: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-smooth: var(--transition-luxury);

  /* ── Spacing scale ── */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;

  /* ── Type scale ── */
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: clamp(2rem, 4vw, 3.5rem);

  /* ── Layout ── */
  --radius-none: 0;
  --z-sticky: 1000;
  --shadow-subtle: 0 4px 20px rgba(26, 26, 26, 0.08);
  --shadow-glass: 0 8px 32px rgba(26, 26, 26, 0.12);
  --color-text-secondary: var(--text-secondary);
}

/* Base Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-ivory);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-ivory);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Typography Scale */
.hero-title-luxury {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.h2-luxury {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.2;
}

.h3-luxury {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
}

.body-luxury {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}

.caption-luxury {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.btn-typography {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Glassmorphism Utilities */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: var(--border-gold);
}

/* Gold border utilities */
.border-gold-bottom {
  border-bottom: var(--border-gold);
}

.border-gold-all {
  border: var(--border-gold);
}

/* Animation Base States (for GSAP/ScrollTrigger targets) */
.gsap-reveal {
  opacity: 0;
  transform: translateY(30px);
}

.gsap-reveal-fade {
  opacity: 0;
}

.gsap-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.gsap-reveal-right {
  opacity: 0;
  transform: translateX(40px);
}