/* ==========================================================================
   The Farm Stay (Varun's Heaven Villa) — Theme Variables
   Colors are estimated from the screenshot. Verify against brand source.
   ========================================================================== */

:root {
  /* ---------- Brand colors ---------- */
  --color-cream:        #f6eedd;   /* light section background */
  --color-cream-dark:   #ece0c8;   /* subtle borders / alt cream */
  --color-brown:        #5a3826;   /* dark section background (Accommodation, CTA) */
  --color-brown-deep:   #3e2619;   /* deepest brown (Royal Bhunga, footer, header) */
  --color-brown-mid:    #7a5238;   /* hover / lighter brown */
  --color-gold:         #d4af5a;   /* accent: buttons, labels, prices */
  --color-gold-light:   #e6c978;   /* gold hover / highlights */
  --color-gold-dark:    #b8923f;   /* gold pressed / text on cream */
  --color-night:        #14100d;   /* hero / night-image overlay base */

  /* ---------- Semantic: backgrounds ---------- */
  --bg-light:           var(--color-cream);
  --bg-dark:            var(--color-brown);
  --bg-darker:          var(--color-brown-deep);
  --bg-card:            var(--color-cream);
  --bg-header:          rgba(62, 38, 25, 0.85);
  --bg-hero-overlay:    linear-gradient(to bottom, rgba(20, 16, 13, 0.75), rgba(20, 16, 13, 0.35) 60%, rgba(20, 16, 13, 0.7));

  /* ---------- Semantic: text ---------- */
  --text-on-light:          var(--color-brown-deep);
  --text-on-light-muted:    #6b5444;
  --text-on-dark:           var(--color-cream);
  --text-on-dark-muted:     rgba(246, 238, 221, 0.75);
  --text-accent:            var(--color-gold);
  --text-accent-on-light:   var(--color-gold-dark);

  /* ---------- Buttons ---------- */
  --btn-solid-bg:           var(--color-brown-deep);   /* dark pill on cream */
  --btn-solid-text:         var(--color-cream);
  --btn-solid-hover-bg:     var(--color-brown-mid);
  --btn-gold-bg:            var(--color-gold);         /* gold pill on dark */
  --btn-gold-text:          var(--color-brown-deep);
  --btn-gold-hover-bg:      var(--color-gold-light);

  /* ---------- Borders & lines ---------- */
  --border-light:           var(--color-cream-dark);
  --border-gold:            var(--color-gold);
  --border-on-dark:         rgba(212, 175, 90, 0.35);
  --divider-color:          var(--color-gold);

  /* ---------- Typography: families ---------- */
  /* Serif headings look like Cormorant Garamond; sans body like Montserrat/Jost */
  --font-heading: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", "Jost", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Typography: sizes ---------- */
  --fs-hero:      clamp(2.75rem, 6vw, 5rem);
  --fs-h2:        clamp(2rem, 3.5vw, 3rem);
  --fs-h3:        clamp(1.25rem, 2vw, 1.625rem);
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-label:     0.6875rem;     /* small tracked labels: WELCOME, ACCOMMODATION */
  --fs-btn:       0.75rem;
  --fs-nav:       0.6875rem;
  --fs-price:     1.5rem;

  /* ---------- Typography: weights ---------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold: 600;

  /* ---------- Typography: spacing ---------- */
  --lh-heading:   1.15;
  --lh-body:      1.7;
  --ls-label:     0.3em;         /* wide tracking for labels */
  --ls-btn:       0.18em;
  --ls-nav:       0.2em;

  /* ---------- Spacing scale ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --section-padding-y: clamp(4rem, 8vw, 7rem);

  /* ---------- Layout ---------- */
  --container-max:    1100px;
  --container-narrow: 760px;
  --container-pad:    clamp(1rem, 4vw, 2rem);
  --header-height:    72px;
  --grid-gap:         var(--space-5);

  /* ---------- Radius & shapes ---------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-pill:  999px;         /* buttons, facility chips */
  --radius-arch:  999px 999px 0 0;  /* arched image frames (rooms, welcome) */
  --radius-circle: 50%;          /* bhunga circular image */

  /* ---------- Shadows ---------- */
  --shadow-card:   0 10px 30px rgba(62, 38, 25, 0.18);
  --shadow-image:  0 16px 40px rgba(20, 16, 13, 0.35);
  --shadow-gold:   0 0 0 1px var(--color-gold);

  /* ---------- Motion ---------- */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration:      300ms;
  --duration-slow: 600ms;
  --marquee-speed: 30s;          /* scrolling ticker under hero */

  /* ---------- Z-index ---------- */
  --z-header:  100;
  --z-overlay: 50;
  --z-modal:   1000;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
    --marquee-speed: 0s;
  }
}