/* ── Hotel Luz Design Tokens — Warm Tropical ───────────────── */
:root {
  /* Logo palette */
  --yellow-pale:  #EDE4AF;
  --yellow:       #F2C230;
  --orange:       #D4892F;
  --green:        #1B6B4A;
  --green-light:  #238C5F;
  --green-dark:   #145436;
  --pink:         #E8729A;

  /* Accent — primary = green, secondary = yellow */
  --accent:       var(--green);
  --accent-light: var(--green-light);
  --gold:         #F2C230;
  --gold-light:   #F7D96B;

  /* Surfaces */
  --white:        #ffffff;
  --warm-white:   #FFFDF7;
  --offwhite:     #f5f0eb;
  --cream:        #e8e0d4;
  --dark:         #2A2A2A;
  --dark-deep:    #1E1E1E;
  --charcoal:     #2A2A2A;
  --charcoal-light: #383838;
  --black:        #1E1E1E;

  /* Text */
  --text-dark:    #2A2A2A;
  --text-body:    #4A4A4A;
  --text-muted:   rgba(0, 0, 0, 0.45);
  --text-light:   #ffffff;
  --muted:        rgba(255, 255, 255, 0.6);
  --muted-dark:   rgba(255, 255, 255, 0.4);

  /* Typography */
  --font:         'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Layout */
  --max-w:        1200px;
  --page-pad:     clamp(24px, 5vw, 80px);

  /* Easing */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-weight: 300;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; border: none; outline: none; }

/* ── Scroll reveal ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}