/**
 * Design tokens for the Churchill FH prototype.
 * Single source of truth for colour, 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 recognisable) ---- */
  --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 colour. */
  --color-black: #000000;
  --color-rose: #8c3c67;
  --color-rose-soft: #b06a8e;
  --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;
  --header-height: 141px;
  --header-height-mobile: 83px;
  --map-panel-width: 567px;

  /* ---- 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;
  --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 {
    --text-hero: 38px;
    --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);
  }
}