/* ===========================================================================
   Lemon Drops Villa & Pool — design tokens
   ---------------------------------------------------------------------------
   Every brand value lives here as a custom property. Nothing below this file
   should hard-code a colour, a radius or a type size.

   Deep teal #0A3F4D is the brand colour carried over from the existing site
   and named in the brief. The logo lockup draws its own teal slightly darker
   (#033747), which reads as depth rather than a clash when the two sit side by
   side. Warm cream and limestone carry the backgrounds; muted lemon carries
   the primary calls to action. The old terracotta is retired.

   All pairs are verified by tools/contrast.py — re-run it after any change.
   =========================================================================== */

:root {
  /* Teal — the brand spine ------------------------------------------------ */
  --ld-teal-900: #07303b;   /* footer, deepest panels, photographic scrims   */
  --ld-teal-800: #0a3f4d;   /* THE brand teal                                */
  --ld-teal-600: #0e5b6e;   /* lighter teal for hairlines and hover states   */
  --ld-logo-teal: #033747;  /* the lockup's own teal, for reference          */

  /* Warm neutrals --------------------------------------------------------- */
  --ld-cream:      #faf7f1; /* page background                                */
  --ld-limestone:  #ece2d2; /* alternating section background                 */
  --ld-limestone-soft: #f4ece0;

  /* Ink ------------------------------------------------------------------- */
  --ld-ink:   #17272c;      /* body copy, 14.4:1 on cream                    */
  --ld-muted: #56666b;      /* secondary copy, 5.6:1 on cream                */

  /* Lemon — reserved for things that matter -------------------------------- */
  --ld-lemon:       #f5b944; /* matches the drop in the logo                 */
  --ld-lemon-hover: #e5a828;
  --ld-lemon-deep:  #855d06; /* lemon as *text* on cream needs this darkening */

  /* Natural accents -------------------------------------------------------
     The rest of the brand palette. Used sparingly and on purpose: cypress on
     the facilities icons so they read warmer than the teal headings, timber
     for the sand-toned panel edge, turquoise for the water motif behind the
     map consent panel. Olive is held for the photography-era accents. */
  --ld-timber:    #8a6a4b;
  --ld-olive:     #6b7a4a;
  --ld-cypress:   #2f5d4f;
  --ld-turquoise: #2f8ea0;

  /* Lines and shadow ------------------------------------------------------- */
  --ld-line:        rgba(10, 63, 77, .16);
  --ld-line-strong: rgba(10, 63, 77, .28);
  --ld-line-light:  rgba(255, 255, 255, .22);
  --ld-shadow-soft: 0 1px 2px rgba(7, 48, 59, .04), 0 8px 24px rgba(7, 48, 59, .06);
  --ld-shadow-lift: 0 2px 6px rgba(7, 48, 59, .08), 0 18px 44px rgba(7, 48, 59, .12);

  /* Type ------------------------------------------------------------------- */
  --ld-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ld-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ld-step-hero:  clamp(2.35rem, 1.35rem + 4.3vw, 4.5rem);
  --ld-step-h2:    clamp(1.75rem, 1.25rem + 2.1vw, 2.85rem);
  --ld-step-h3:    clamp(1.1rem, 1.02rem + .38vw, 1.3rem);
  --ld-step-lead:  clamp(1.06rem, 1rem + .35vw, 1.22rem);
  --ld-step-body:  1.0625rem;
  --ld-step-small: .9375rem;
  --ld-step-micro: .8125rem;

  --ld-tracking-eyebrow: .18em;

  /* Geometry — square-ish and architectural, never pill-shaped ------------- */
  --ld-radius-xs: 2px;
  --ld-radius-sm: 3px;
  --ld-radius-md: 6px;
  --ld-radius-lg: 10px;

  /* Rhythm ------------------------------------------------------------------ */
  --ld-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --ld-gutter: 1.5rem;
  --ld-measure: 62ch;

  /* Motion — short, small, and always optional ------------------------------ */
  --ld-ease: cubic-bezier(.22, .61, .36, 1);
  --ld-dur: 240ms;

  /* Layering ---------------------------------------------------------------- */
  --ld-z-nav: 1030;
  --ld-z-skip: 1080;

  /* --- Bootstrap variable overrides --------------------------------------
     Setting Bootstrap's own custom properties means its components inherit the
     brand instead of being fought with overrides and !important. */
  --bs-body-font-family: var(--ld-font-body);
  --bs-body-font-size: var(--ld-step-body);
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--ld-ink);
  --bs-body-color-rgb: 23, 39, 44;
  --bs-body-bg: var(--ld-cream);
  --bs-body-bg-rgb: 250, 247, 241;
  --bs-emphasis-color: var(--ld-teal-800);
  --bs-secondary-color: var(--ld-muted);
  --bs-border-color: var(--ld-line);
  --bs-border-radius: var(--ld-radius-sm);
  --bs-border-radius-sm: var(--ld-radius-xs);
  --bs-border-radius-lg: var(--ld-radius-md);
  --bs-link-color: var(--ld-teal-800);
  --bs-link-color-rgb: 10, 63, 77;          /* Bootstrap needs the triplet too */
  --bs-link-hover-color: var(--ld-teal-600);
  --bs-link-hover-color-rgb: 14, 91, 110;
  --bs-heading-color: var(--ld-teal-800);
  --bs-focus-ring-color: rgba(14, 91, 110, .45);
  --bs-focus-ring-width: 3px;
}