/* ============================================================
   MAXRENTAL — Typography tokens
   Display & headings: Helvetica (bold, tight tracking)
   Body & UI: DM Sans
   Labels (uppercase, tracked): Satoshi
   Micro UI: Inter
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-label:   "Satoshi", "DM Sans", Arial, sans-serif;  /* uppercase CTA / eyebrow */
  --font-ui:      "Inter", "DM Sans", Arial, sans-serif;     /* micro text */

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Font-size scale (px) ---- */
  --fs-hero:    64px;   /* hero H1 */
  --fs-display: 48px;   /* section H2 */
  --fs-h2:      40px;
  --fs-h3:      32px;
  --fs-h4:      28px;
  --fs-h5:      24px;
  --fs-lg:      22px;   /* lead paragraph */
  --fs-md:      20px;
  --fs-body:    18px;   /* default body */
  --fs-base:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-2xs:     12px;   /* labels / micro */

  /* ---- Line heights ---- */
  --lh-tight:   1.2; /* @kind other */
  --lh-snug:    1.4; /* @kind other */
  --lh-body:    1.6; /* @kind other */
  --lh-flat:    1;   /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-hero:    -1.28px;  /* −0.02em at hero size */
  --ls-display: -0.96px;
  --ls-heading: -0.5px;
  --ls-label:   0.7px;    /* uppercase tracking */
  --ls-normal:  0;        /* @kind other */

  /* ============================================================
     TYPE STYLE ALIASES — shorthand bundles
     ============================================================ */
  --text-hero:    var(--weight-bold) var(--fs-hero)/var(--lh-tight) var(--font-display);
  --text-display: var(--weight-bold) var(--fs-display)/var(--lh-tight) var(--font-display);
  --text-h3:      var(--weight-bold) var(--fs-h3)/var(--lh-tight) var(--font-display);
  --text-h4:      var(--weight-bold) var(--fs-h4)/var(--lh-tight) var(--font-display);
  --text-h5:      var(--weight-bold) var(--fs-h5)/var(--lh-snug) var(--font-display);
  --text-lead:    var(--weight-regular) var(--fs-lg)/var(--lh-body) var(--font-body);
  --text-body:    var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  --text-small:   var(--weight-regular) var(--fs-sm)/var(--lh-snug) var(--font-body);
}