/* ==========================================================================
   variables.css  —  Design tokens (single source of truth)
   --------------------------------------------------------------------------
   Editorial-nature theme for the LONA land parcel, Lonavala.
   Change a value here and it updates everywhere. No other file hard-codes
   colours, fonts or spacing — always reference these custom properties.
   ========================================================================== */

:root {
  /* ---- Brand colours -------------------------------------------------- */
  --color-forest-950: #0b1c15;   /* near-black green — deepest shadow/vignette */
  --color-forest-900: #0f261c;   /* darkest green — hero overlays, footer  */
  --color-forest-800: #173124;   /* primary deep green — header, headings  */
  --color-forest-700: #234a39;   /* hover / secondary green                */
  --color-sage-500:   #7c9a82;   /* muted sage accent                      */
  --color-sage-300:   #aebfa9;   /* light sage — borders, subtle fills     */
  --color-brass-500:  #b08d57;   /* warm brass — DECORATIVE only (rules)   */
  --color-brass-700:  #7d5e2c;   /* deep bronze — text/links on light (AA) */
  --color-brass-300:  #cdb083;   /* light brass — text/eyebrows on dark    */

  /* ---- Neutrals ------------------------------------------------------- */
  --color-cream-50:   #f4efe4;   /* page background — warmer, softer paper  */
  --color-cream-100:  #ece5d6;   /* alt section background                 */
  --color-stone-300:  #ddd6c6;   /* hairline borders — quieter             */
  --color-ink-900:    #1b211d;   /* body text on light                     */
  --color-ink-600:    #4a534c;   /* muted body text                        */
  --color-white:      #ffffff;

  /* ---- Semantic aliases (use these in components) --------------------- */
  --bg-page:        var(--color-cream-50);
  --bg-alt:         var(--color-cream-100);
  --bg-dark:        var(--color-forest-800);
  --text-base:      var(--color-ink-900);
  --text-muted:     var(--color-ink-600);
  --text-on-dark:   var(--color-cream-50);
  --accent:         var(--color-brass-500);   /* decorative: rules, dots   */
  --accent-ink:     var(--color-brass-700);   /* text/links on light (AA)  */
  --accent-on-dark: var(--color-brass-300);   /* text/eyebrows on dark     */
  --border-soft:    var(--color-stone-300);

  /* ---- Typography ----------------------------------------------------- */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  "Space Mono", ui-monospace, "Courier New", monospace;  /* expressive display mono for the stat numbers */

  --fs-display: clamp(2.75rem, 7vw, 6rem);   /* hero headline             */
  --fs-h1:      clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.78rem;                       /* small caps labels        */

  --lh-tight:   1.08;
  --lh-snug:    1.3;
  --lh-body:    1.7;

  --tracking-wide:  0.18em;   /* eyebrows / nav                            */
  --tracking-snug:  0.02em;

  /* ---- Spacing scale -------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;
  --section-y: clamp(4.5rem, 11vw, 10rem);  /* generous vertical rhythm    */

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---- Radius / shadow ------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  /* Atmospheric shadows: large, soft, low-opacity — depth, not a "card"   */
  --shadow-sm: 0 1px 2px rgba(11, 28, 21, 0.04), 0 8px 24px -12px rgba(11, 28, 21, 0.18);
  --shadow-md: 0 40px 90px -34px rgba(11, 28, 21, 0.45);

  /* ---- Motion --------------------------------------------------------- */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);   /* soft out          */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);   /* long, settling    */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur:       0.45s;
  --dur-med:   0.7s;
  --dur-slow:  1.05s;
  --reveal-stagger: 110ms;   /* gap between staggered siblings            */

  /* ---- Material ------------------------------------------------------- */
  --grain-opacity: 0.045;    /* film grain over the whole page            */

  --header-h: 76px;
}