/* Saltycustoms Design System — Typography Tokens */
/* Primary font: Inter (open-source substitute for Airbnb Cereal VF) */
/* Fallback chain mirrors Airbnb's: Circular → system stack */

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

:root {
  /* ── Font Families ───────────────────────────────────────── */
  --font-primary: 'Inter', 'Circular', -apple-system, system-ui, Roboto,
                  'Helvetica Neue', sans-serif;

  /* ── Type Scale ──────────────────────────────────────────── */

  /* Rating display — the loudest type moment in the entire system */
  --font-size-rating-display:     64px;
  --font-weight-rating-display:   700;
  --line-height-rating-display:   1.1;
  --letter-spacing-rating-display:-1px;

  /* Display XL — homepage h1 */
  --font-size-display-xl:         28px;
  --font-weight-display-xl:       700;
  --line-height-display-xl:       1.43;
  --letter-spacing-display-xl:    0;

  /* Display LG — listing detail h1 */
  --font-size-display-lg:         22px;
  --font-weight-display-lg:       500;
  --line-height-display-lg:       1.18;
  --letter-spacing-display-lg:    -0.44px;

  /* Display MD — section heads inside listing detail */
  --font-size-display-md:         21px;
  --font-weight-display-md:       700;
  --line-height-display-md:       1.43;
  --letter-spacing-display-md:    0;

  /* Display SM — sub-section titles */
  --font-size-display-sm:         20px;
  --font-weight-display-sm:       600;
  --line-height-display-sm:       1.20;
  --letter-spacing-display-sm:    -0.18px;

  /* Title MD — city link block titles */
  --font-size-title-md:           16px;
  --font-weight-title-md:         600;
  --line-height-title-md:         1.25;
  --letter-spacing-title-md:      0;

  /* Title SM — footer column heads */
  --font-size-title-sm:           16px;
  --font-weight-title-sm:         500;
  --line-height-title-sm:         1.25;
  --letter-spacing-title-sm:      0;

  /* Body MD — default running text */
  --font-size-body-md:            16px;
  --font-weight-body-md:          400;
  --line-height-body-md:          1.5;
  --letter-spacing-body-md:       0;

  /* Body SM — card meta, dates, prices */
  --font-size-body-sm:            14px;
  --font-weight-body-sm:          400;
  --line-height-body-sm:          1.43;
  --letter-spacing-body-sm:       0;

  /* Caption — search field segment labels */
  --font-size-caption:            14px;
  --font-weight-caption:          500;
  --line-height-caption:          1.29;
  --letter-spacing-caption:       0;

  /* Caption SM — footer legal line */
  --font-size-caption-sm:         13px;
  --font-weight-caption-sm:       400;
  --line-height-caption-sm:       1.23;
  --letter-spacing-caption-sm:    0;

  /* Badge — "Guest favorite" floating badge */
  --font-size-badge:              11px;
  --font-weight-badge:            600;
  --line-height-badge:            1.18;
  --letter-spacing-badge:         0;

  /* Micro label — amenity labels */
  --font-size-micro-label:        12px;
  --font-weight-micro-label:      700;
  --line-height-micro-label:      1.33;
  --letter-spacing-micro-label:   0;

  /* Uppercase tag — "NEW" badge */
  --font-size-uppercase-tag:      8px;
  --font-weight-uppercase-tag:    700;
  --line-height-uppercase-tag:    1.25;
  --letter-spacing-uppercase-tag: 0.32px;
  --text-transform-uppercase-tag: uppercase;

  /* Button MD — primary CTA labels */
  --font-size-button-md:          16px;
  --font-weight-button-md:        500;
  --line-height-button-md:        1.25;
  --letter-spacing-button-md:     0;

  /* Button SM — pill button labels */
  --font-size-button-sm:          14px;
  --font-weight-button-sm:        500;
  --line-height-button-sm:        1.29;
  --letter-spacing-button-sm:     0;

  /* Link — inline body links */
  --font-size-link:               14px;
  --font-weight-link:             400;
  --line-height-link:             1.43;
  --letter-spacing-link:          0;

  /* Nav link — top product-nav labels */
  --font-size-nav-link:           16px;
  --font-weight-nav-link:         600;
  --line-height-nav-link:         1.25;
  --letter-spacing-nav-link:      0;
}