/* =========================================================
   EQTY — Typography tokens
   ========================================================= */

@font-face {
  font-family: "Filson Pro";
  src: url("assets/Fonts/FilsonPro-Bold.otf") format("opentype"),
       url("assets/FilsonPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Families ----------------------------------------- */
  --font-heading: "Filson Pro", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  --serif: var(--font-heading);
  --sans:  var(--font-body);
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Display ------------------------------------------ */
  --t-display:    160px;
  --t-display-lh: 0.92;
  --t-display-ls: -0.03em;

  /* --- H1 ----------------------------------------------- */
  --t-h1:    112px;
  --t-h1-lh: 0.96;
  --t-h1-ls: -0.025em;

  /* --- H2 ----------------------------------------------- */
  --t-h2:    64px;
  --t-h2-lh: 1.02;
  --t-h2-ls: -0.022em;

  /* --- H3 ----------------------------------------------- */
  --t-h3:    24px;
  --t-h3-lh: 1.2;
  --t-h3-ls: -0.01em;

  /* --- Body L ------------------------------------------- */
  --t-bodyL:    18px;
  --t-bodyL-lh: 1.55;

  /* --- Body L Compact ----------------------------------- */
  --t-bodyL-compact:    16px;
  --t-bodyL-compact-lh: 1.55;

  /* --- Body --------------------------------------------- */
  --t-body:    16px;
  --t-body-lh: 1.55;

  /* --- Eyebrow ------------------------------------------ */
  --t-eyebrow:    11px;
  --t-eyebrow-ls: 0.22em;

  /* --- CTA1 --------------------------------------------- */
  --t-cta1:    11px;
  --t-cta1-ls: 0.04em;
}

h1, h2, h3,
.hero__h,
.hv2-h {
  font-family: var(--font-heading) !important;
}

/* ---- Responsive type scale ---- */

@media (max-width: 1023px) {
  :root {
    --t-display: 96px;
    --t-h1:      72px;
    --t-h2:      44px;
  }
}

@media (max-width: 768px) {
  :root {
    --t-display: 56px;
    --t-h1:      48px;
    --t-h2:      34px;
    --t-h3:      20px;
    --t-bodyL:   16px;
    --t-body:    15px;
    --t-eyebrow: 10px;
  }
}

@media (max-width: 480px) {
  :root {
    --t-display: 44px;
    --t-h1:      40px;
    --t-h2:      28px;
  }
}