/* ============================================================
   TYPOGRAPHY — Johnson Team / CrossCountry Mortgage
   ------------------------------------------------------------
   ONE family, many weights. CCM sets everything — giant display
   headlines, sub-labels, body and small print — in the same
   geometric sans. Display moments run HEAVY (800/900) and tight;
   body runs 400/500 at a comfortable, humane line-height.
   Eyebrow / button labels are UPPERCASE with positive tracking.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Figtree", "Helvetica Neue", Arial, sans-serif;
  /* No custom mono in the brand — native system monospace stack only. */
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-display-2xl: 88px;   /* hero name */
  --fs-display-xl:  64px;
  --fs-display-lg:  48px;   /* section headlines */
  --fs-display-md:  38px;
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-micro:   11px;

  /* ---- Line heights ---- */
  --lh-tight:    1.02;   /* @kind font */ /* big display */
  --lh-snug:     1.12;   /* @kind font */ /* headlines */
  --lh-heading:  1.2;    /* @kind font */
  --lh-normal:   1.5;    /* @kind font */ /* body */
  --lh-relaxed:  1.62;   /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.02em;  /* @kind font */ /* display */
  --ls-snug:    -0.01em;  /* @kind font */
  --ls-normal:  0;        /* @kind font */
  --ls-wide:    0.04em;   /* @kind font */
  --ls-eyebrow: 0.12em;   /* @kind font */ /* uppercase labels */
  --ls-button:  0.06em;   /* @kind font */

  /* ============================================================
     SEMANTIC TYPE TOKENS
     ============================================================ */

  /* Display / hero */
  --type-display-font:   var(--font-display);
  --type-display-weight: var(--fw-black);
  --type-display-ls:     var(--ls-tight);
  --type-display-lh:     var(--lh-tight);

  /* Headings */
  --type-heading-font:   var(--font-display);
  --type-heading-weight: var(--fw-extrabold);
  --type-heading-ls:     var(--ls-snug);
  --type-heading-lh:     var(--lh-snug);

  /* Body */
  --type-body-font:   var(--font-body);
  --type-body-weight: var(--fw-regular);
  --type-body-lh:     var(--lh-relaxed);

  /* Eyebrow / label */
  --type-eyebrow-font:   var(--font-display);
  --type-eyebrow-weight: var(--fw-bold);
  --type-eyebrow-ls:     var(--ls-eyebrow);

  /* Button */
  --type-button-weight: var(--fw-bold);
  --type-button-ls:     var(--ls-button);
}