/**
 * Design tokens for the Churchill FH prototype.
 * Single source of truth for color, type, spacing and elevation — every other
 * stylesheet reads from here so a Figma variable change lands in exactly one place.
 * Values mirror the Figma variables on file MNA1Q69YPgJY0Iay3tXwgD.
 */

:root {
  /* ---- Brand palette (Figma variables, names kept recognizable) ---- */
  --color-white: #ffffff;
  /* A literal black, and not the same thing as --color-grey-dark. The Figma text styles
     for the form-card and testimonial headings ask for #000; body copy asks for #212529.
     The prototype used this name without ever defining it, so those headings fell back to
     an inherited color. */
  --color-black: #000000;
  --color-rose: #8c3c67;
  --color-rose-soft: #b06a8e;
  /* The newer FH Figma file draws the Locations menu's state chip in a brighter rose than
     --color-rose. Only the chip uses it. */
  --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 ----
     Three faces, matching the Figma text styles:
     - Bricolage Grotesque for display headings (variable: opsz 14, wdth 100)
     - Proxima Nova for nav, buttons and eyebrow labels
     - Inter for body copy.
     All three are served by this application; see fonts.css.

     Montserrat stays in the stack below but is no longer downloaded. It only ever stood
     in for Proxima Nova, which fonts.css now always supplies, so requesting it cost four
     weight files on every page for a face that never painted. It is left in the list so 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;

  /* Nav and eyebrow labels in the design are letter-spaced uppercase. */
  --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;
  /* Figma `75:8508`: at the 1920 canvas the results column runs 80..1305 and the map runs
     1355..1920, so the panel is 565px, the space between is 50px, and the panel takes the
     right margin rather than sitting inside it. */
  --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;

  /* Hairline used on FAQ rows and other dividers over light grounds. */
  --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 to the mobile 390 frame. */
@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;
    /* The mobile 390 frame runs every section on a 40px band and a 16px gutter. */
    --space-22: 40px;
    --gutter: 16px;
    --header-height: var(--header-height-mobile);
  }
}