:root {
  /* ---- Brand palette ---- */
  --color-white: #ffffff;
  /* A literal black for the form-card and testimonial headings. Not the same thing as
     --color-grey-dark, which body copy uses. */
  --color-black: #000000;
  --color-rose: #8c3c67;
  --color-rose-soft: #b06a8e;
  --color-rose-chip: #a82a6e;
  --color-green-primary: #027583;
  --color-green-secondary: #009092;
  --color-grey: #9694af;
  --color-grey-light: #d9d9d9;
  --color-grey-dark: #212529;
  --color-grey-secondary: #1a3746;
  --color-super-light-grey: #f9fbfb;
  --color-field-stroke: #d1d5dc;

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--color-super-light-grey);
  --surface-raised: var(--color-white);
  --surface-tint: #f1f8f9;
  --surface-mint: #eefbfe;
  --surface-dark: #131827;
  --surface-dark-alt: #1b3f4e;
  --surface-scrim: rgba(0, 0, 0, 0.55);

  /* Frosted panels sit over photography (hero search card, amenity copy card). */
  --surface-glass: rgba(255, 255, 255, 0.82);
  --surface-glass-strong: rgba(255, 255, 255, 0.94);
  --surface-glass-dark: rgba(19, 26, 36, 0.55);

  /* ---- Semantic text ---- */
  --text-primary: var(--color-grey-dark);
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-inverse: var(--color-white);
  --text-inverse-muted: rgba(255, 255, 255, 0.76);
  --text-accent: var(--color-green-primary);

  /* ---- Borders ---- */
  --border-subtle: #e5e9ec;
  --border-field: var(--color-field-stroke);
  --border-inverse: rgba(255, 255, 255, 0.24);

  /* ---- Status ---- */
  --color-star: #f5b301;
  --color-limited: var(--color-rose);

  /* ---- Typography ----
     All three faces are served by this application; see fonts.css. Montserrat stays in
     the stack but is never downloaded: it only stood in for Proxima Nova, which fonts.css
     always supplies. A visitor who has it installed still gets a close match if the
     woff2 fails to load. */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui: "Proxima Nova", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Bricolage is a variable font; every display run pins the same axes as the design. */
  --display-axes: "opsz" 14, "wdth" 100;

  --text-hero: 76px;
  --text-hero-lh: 86px;
  --text-hero-sub: 26px;
  --text-hero-sub-lh: 34px;
  --text-h2: 50px;
  --text-h2-lh: 60px;
  --text-h3: 24px;
  --text-h3-lh: 34px;
  --text-h4: 20px;
  --text-h4-lh: 28px;
  --text-lead: 20px;
  --text-lead-lh: 32px;
  --text-body: 16px;
  --text-body-lh: 26px;
  --text-sm: 14px;
  --text-sm-lh: 22px;
  --text-xs: 12px;
  --text-xs-lh: 18px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-nav: 0.08em;
  --tracking-eyebrow: 0.12em;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-22: 90px;

  /* ---- Layout ---- */
  --container-max: 1552px;   /* most home sections: 1920 canvas - 184 margins */
  --container-wide: 1760px;  /* browse results: 1920 canvas - 80 margins */
  --gutter: 24px;
  /* The bar is the lockup plus 12px of clearance top and bottom, where the design's 141px
     left 33px. Deriving it means the two cannot drift: the lockup steps down with the
     header's own shed (chrome.css) and the bar follows it down. */
  --header-lockup: 75px;
  --header-height: calc(var(--header-lockup) + 24px);
  --header-height-mobile: 83px;
  --map-panel-width: 565px;
  --map-panel-gap: 50px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  /* The field/button component ships at two sizes: 56px tall with a 7px radius, and
     80px tall with a 14px radius. */
  --radius-control: 7px;
  --radius-control-lg: 14px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --border-hairline: #dee5e8;

  /* ---- Elevation ---- */
  --shadow-field: 0 4px 7.5px rgba(0, 0, 0, 0.1);
  --shadow-cta: 0 10px 15px -3px rgba(0, 144, 146, 0.25);
  --shadow-card: 0 2px 12px rgba(16, 24, 40, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(16, 24, 40, 0.14);
  --shadow-float: 0 18px 48px rgba(16, 24, 40, 0.18);
  --shadow-popup: 0 24px 60px rgba(16, 24, 40, 0.24);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  --z-sticky: 20;
  /* A full-screen panel that still sits under the header, and under the date popover it
     opens — the Select Unit sheet on the property page. */
  --z-sheet: 30;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;
}

/* Below the desktop breakpoint the display sizes step down. */
@media (max-width: 900px) {
  :root {
    /* Only the home hero reads this at mobile — every other page overrides h1 (28px
       via --text-h2 on the sub-pages, 30px on browse and details, 34px on Real Estate). */
    --text-hero: 42px;
    --text-hero-lh: 46px;
    --text-hero-sub: 17px;
    --text-hero-sub-lh: 26px;
    --text-h2: 28px;
    --text-h2-lh: 36px;
    --text-h3: 20px;
    --text-h3-lh: 28px;
    --text-lead: 16px;
    --text-lead-lh: 26px;
    --space-22: 40px;
    --gutter: 16px;
    --header-height: var(--header-height-mobile);
  }
}