/* =========================================================================
   Airbnb Design System — Foundation tokens
   Sourced from the brand spec. Font substitution: Airbnb Cereal VF is a
   proprietary licensed face; we use Inter as the open-source substitute
   per the spec's own recommendation. Adjust line-height down ~2% on
   display when Cereal becomes available.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* -----------------------------------------------------------------------
     COLOR — Brand & accent
  ----------------------------------------------------------------------- */
  --color-primary:           #ff385c;   /* Rausch — the brand */
  --color-primary-active:    #e00b41;   /* press / pointer-down */
  --color-primary-disabled:  #ffd1da;   /* pale CTA */
  --color-luxe:              #460479;   /* sub-brand: Luxe */
  --color-plus:              #92174d;   /* sub-brand: Plus */
  --color-on-primary:        #ffffff;

  /* COLOR — Surface */
  --color-canvas:            #ffffff;
  --color-surface-soft:      #f7f7f7;
  --color-surface-strong:    #f2f2f2;

  /* COLOR — Hairlines & borders */
  --color-hairline:          #dddddd;
  --color-hairline-soft:     #ebebeb;
  --color-border-strong:     #c1c1c1;

  /* COLOR — Text */
  --color-ink:               #222222;   /* never pure black */
  --color-body:              #3f3f3f;
  --color-muted:             #6a6a6a;
  --color-muted-soft:        #929292;
  --color-star-rating:       #222222;   /* same as ink — deliberate */

  /* COLOR — Semantic */
  --color-error:             #c13515;
  --color-error-hover:       #b32505;
  --color-legal-link:        #428bff;

  /* COLOR — Scrim */
  --color-scrim:             rgba(0,0,0,0.5);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Family
  ----------------------------------------------------------------------- */
  --font-family-base: "Airbnb Cereal VF", "Cereal", "Circular",
                      "Inter", -apple-system, system-ui, Roboto,
                      "Helvetica Neue", sans-serif;

  /* TYPOGRAPHY — Tokens (size / weight / line-height / tracking) */
  /* rating-display */
  --type-rating-display-size: 64px;
  --type-rating-display-weight: 700;
  --type-rating-display-lh: 1.1;
  --type-rating-display-ls: -1px;

  /* display-xl  — homepage h1 */
  --type-display-xl-size: 28px;
  --type-display-xl-weight: 700;
  --type-display-xl-lh: 1.43;

  /* display-lg  — listing-detail h1 */
  --type-display-lg-size: 22px;
  --type-display-lg-weight: 500;
  --type-display-lg-lh: 1.18;
  --type-display-lg-ls: -0.44px;

  /* display-md  — listing section heads */
  --type-display-md-size: 21px;
  --type-display-md-weight: 700;
  --type-display-md-lh: 1.43;

  /* display-sm  — sub-section titles */
  --type-display-sm-size: 20px;
  --type-display-sm-weight: 600;
  --type-display-sm-lh: 1.20;
  --type-display-sm-ls: -0.18px;

  /* title-md / title-sm */
  --type-title-md-size: 16px;
  --type-title-md-weight: 600;
  --type-title-md-lh: 1.25;

  --type-title-sm-size: 16px;
  --type-title-sm-weight: 500;
  --type-title-sm-lh: 1.25;

  /* body */
  --type-body-md-size: 16px;
  --type-body-md-weight: 400;
  --type-body-md-lh: 1.5;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-lh: 1.43;

  /* caption / micro */
  --type-caption-size: 14px;
  --type-caption-weight: 500;
  --type-caption-lh: 1.29;

  --type-caption-sm-size: 13px;
  --type-caption-sm-weight: 400;
  --type-caption-sm-lh: 1.23;

  --type-badge-size: 11px;
  --type-badge-weight: 600;
  --type-badge-lh: 1.18;

  --type-micro-label-size: 12px;
  --type-micro-label-weight: 700;
  --type-micro-label-lh: 1.33;

  --type-uppercase-tag-size: 8px;
  --type-uppercase-tag-weight: 700;
  --type-uppercase-tag-lh: 1.25;
  --type-uppercase-tag-ls: 0.32px;

  /* buttons / links / nav */
  --type-button-md-size: 16px;
  --type-button-md-weight: 500;
  --type-button-md-lh: 1.25;

  --type-button-sm-size: 14px;
  --type-button-sm-weight: 500;
  --type-button-sm-lh: 1.29;

  --type-link-size: 14px;
  --type-link-weight: 400;
  --type-link-lh: 1.43;

  --type-nav-link-size: 16px;
  --type-nav-link-weight: 600;
  --type-nav-link-lh: 1.25;

  /* -----------------------------------------------------------------------
     SPACING — 4px base with 2px micro
  ----------------------------------------------------------------------- */
  --space-xxs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  48px;
  --space-section: 64px;

  /* -----------------------------------------------------------------------
     RADII — soft everywhere
  ----------------------------------------------------------------------- */
  --radius-sm:   8px;    /* buttons, inputs */
  --radius-md:   14px;   /* property cards, content cards */
  --radius-lg:   24px;
  --radius-xl:   32px;   /* category strip */
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     ELEVATION — exactly one shadow tier
  ----------------------------------------------------------------------- */
  --shadow-float:
    rgba(0,0,0,0.02) 0 0 0 1px,
    rgba(0,0,0,0.04) 0 2px 6px 0,
    rgba(0,0,0,0.10) 0 4px 8px 0;

  /* -----------------------------------------------------------------------
     LAYOUT
  ----------------------------------------------------------------------- */
  --layout-max-editorial: 1280px;
  --layout-max-listing:   1080px;
  --layout-max-wide:      1440px;
  --layout-nav-height:    80px;
  --layout-search-orb:    48px;
  --layout-cta-min:       48px;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */

html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-family-base);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

h1 {
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-lh);
  color: var(--color-ink);
  margin: 0 0 var(--space-base);
}

h2 {
  font-size: var(--type-display-md-size);
  font-weight: var(--type-display-md-weight);
  line-height: var(--type-display-md-lh);
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
}

h3 {
  font-size: var(--type-display-sm-size);
  font-weight: var(--type-display-sm-weight);
  line-height: var(--type-display-sm-lh);
  letter-spacing: var(--type-display-sm-ls);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
}

h4 {
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-lh);
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
}

p {
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-lh);
  color: var(--color-body);
  margin: 0 0 var(--space-base);
}

small, .caption {
  font-size: var(--type-body-sm-size);
  color: var(--color-muted);
}

a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

a.legal { color: var(--color-legal-link); }

/* Utility classes mirroring the type tokens */
.t-rating-display {
  font-size: var(--type-rating-display-size);
  font-weight: var(--type-rating-display-weight);
  line-height: var(--type-rating-display-lh);
  letter-spacing: var(--type-rating-display-ls);
}
.t-display-xl { font-size: 28px; font-weight: 700; line-height: 1.43; }
.t-display-lg { font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.44px; }
.t-display-md { font-size: 21px; font-weight: 700; line-height: 1.43; }
.t-display-sm { font-size: 20px; font-weight: 600; line-height: 1.20; letter-spacing: -0.18px; }
.t-title-md   { font-size: 16px; font-weight: 600; line-height: 1.25; }
.t-title-sm   { font-size: 16px; font-weight: 500; line-height: 1.25; }
.t-body-md    { font-size: 16px; font-weight: 400; line-height: 1.5; }
.t-body-sm    { font-size: 14px; font-weight: 400; line-height: 1.43; }
.t-caption    { font-size: 14px; font-weight: 500; line-height: 1.29; }
.t-caption-sm { font-size: 13px; font-weight: 400; line-height: 1.23; color: var(--color-muted); }
.t-badge      { font-size: 11px; font-weight: 600; line-height: 1.18; }
.t-micro      { font-size: 12px; font-weight: 700; line-height: 1.33; }
.t-uppercase  { font-size: 8px;  font-weight: 700; line-height: 1.25; letter-spacing: 0.32px; text-transform: uppercase; }
.t-nav        { font-size: 16px; font-weight: 600; line-height: 1.25; }
.t-muted      { color: var(--color-muted); }
.t-ink        { color: var(--color-ink); }