/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — Long Hair Don't Care
   Display: Bethany Elingston (self-hosted OTF)
   Body:     Abel 400
───────────────────────────────────────────────────────────── */

:root {
  /* ── Font families ── */
  --font-display: "Bethany Elingston", Georgia, serif;
  --font-body:    "Abel", sans-serif;

  /* ── Weights ── */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    600;

  /* ── Type scale — mobile first ── */
  --text-h1:        3rem;      /* 48px */
  --text-h2:        2.75rem;   /* 44px */
  --text-h3:        2rem;      /* 32px */
  --text-h4:        1.5rem;    /* 24px */
  --text-h5:        1.25rem;   /* 20px */
  --text-h6:        1.125rem;  /* 18px */
  --text-large:     1.125rem;  /* 18px */
  --text-medium:    1rem;      /* 16px */
  --text-regular:   0.875rem;  /* 14px */
  --text-small:     0.75rem;   /* 12px */
  --text-tiny:      0.625rem;  /* 10px */

  /* ── Line heights ── */
  --lh-heading: 1.0;    /* @kind other */
  --lh-subheading: 1.1; /* @kind other */
  --lh-body:    1.5;    /* @kind other */

  /* ── Letter spacing ── */
  --ls-heading:  -0.01em; /* @kind other */
  --ls-eyebrow:  0.12em;  /* @kind other */
  --ls-caps:     0.08em;  /* @kind other */
}

/* ── Desktop scale (≥ 992px) ── */
@media (min-width: 992px) {
  :root {
    --text-h1:        5.25rem;   /* 84px */
    --text-h2:        3.75rem;   /* 60px */
    --text-h3:        3rem;      /* 48px */
    --text-h4:        2.5rem;    /* 40px */
    --text-h5:        2rem;      /* 32px */
    --text-h6:        1.625rem;  /* 26px */
    --text-large:     1.625rem;  /* 26px */
    --text-medium:    1.25rem;   /* 20px */
    --text-regular:   1.125rem;  /* 18px */
    --text-small:     1rem;      /* 16px */
    --text-tiny:      0.75rem;   /* 12px */
  }
}

/* ── Base element styles ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--lh-body);
}

/* Eyebrow text (small caps label above headings) */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-small);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-weight-regular);
}