/* ==========================================================================
   Sienna Beach Hotel — Design tokens
   Palette derived from the hotel's own logo mark (coral sun + lake-blue wave).
   ========================================================================== */

:root {
  /* --- Brand colour: warm (from logo coral/orange) --- */
  --coral-50:  #fdf2ec;
  --coral-100: #fbe1d1;
  --coral-300: #ef9c6f;
  --coral-500: #e85d2a;
  --coral-600: #d24d1d;
  --coral-700: #ab3c17;

  /* --- Brand colour: cool (from logo lake-blue) --- */
  --ocean-100: #d9f0f8;
  --ocean-300: #7fcfe6;
  --ocean-500: #1f86a8;
  --ocean-600: #186c88;
  --ocean-900: #0f3a4a;

  /* --- Deep lake navy (ink) --- */
  --navy-900: #0e2733;
  --navy-800: #12303f;
  --navy-700: #1a3f50;
  --navy-600: #2a5468;

  /* --- Warm neutrals --- */
  --ivory:      #faf6ef;
  --ivory-dim:  #f4ede1;
  --sand:       #efe2c9;
  --sand-dark:  #ddc79f;
  --terracotta: #b6552b;
  --botanical:  #566b4f;

  --white: #ffffff;
  --ink:   #22201c;

  /* --- Semantic tokens --- */
  --color-bg:            var(--ivory);
  --color-bg-alt:        var(--ivory-dim);
  --color-surface:       var(--white);
  --color-text:          var(--ink);
  --color-text-soft:     #5b564d;
  --color-text-inverse:  var(--ivory);
  --color-heading:       var(--navy-800);
  --color-accent:        var(--coral-500);
  --color-accent-dark:   var(--coral-600);
  --color-accent-2:      var(--ocean-500);
  --color-border:        #e4dac8;
  --color-focus:         var(--ocean-600);

  /* --- Typography --- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --fs-sm:   clamp(0.88rem, 0.85rem + 0.15vw, 0.96rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-md:   clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-lg:   clamp(1.4rem, 1.25rem + 0.75vw, 1.9rem);
  --fs-xl:   clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);
  --fs-2xl:  clamp(2.4rem, 1.9rem + 2.5vw, 3.75rem);
  --fs-3xl:  clamp(2.9rem, 2.1rem + 4vw, 5rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-normal: 1.6;

  /* --- Spacing scale --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --section-pad: clamp(3.5rem, 3rem + 3vw, 7rem);
  --container-w: 1240px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* --- Shape / elevation ---
     Kept deliberately restrained: this is a photography-led hospitality
     site, not a SaaS product — frames should read as prints/frames, not
     floating app cards. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Photography corner system ---
     Three tiers, used consistently instead of one-off values per page.
     Full-bleed hero/banner photography intentionally uses none of these —
     it stays square to the viewport edge (see css/base.css .hero-media,
     .page-hero, .bleed).
       sm  — compact grid tiles: gallery thumbnails, lightbox image
       ""  — the default: room cards, split-section feature photography,
             room-detail photographs, map preview
       lg  — prominent layered/overlapping editorial compositions only
             (e.g. the Weddings-style image-behind-panel layout) */
  --radius-image-sm: 12px;
  --radius-image: 16px;
  --radius-image-lg: 24px;

  /* WhatsApp's own brand green — used sparingly, as a small accent chip
     rather than a dominant fill, so the floating chat control still reads
     as part of Sienna's own palette rather than a third-party widget. */
  --whatsapp-green: #25d366;

  --shadow-sm: 0 1px 3px rgba(14, 39, 51, 0.05);
  --shadow-md: 0 8px 24px rgba(14, 39, 51, 0.09);
  --shadow-lg: 0 18px 48px rgba(14, 39, 51, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 380ms;
  --dur-slow: 680ms;

  --header-h: 84px;
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }
}