/*
  typography.css
  All type decisions live here: families, scale, weights, spacing, line-heights.
  Nothing about color, layout, or positioning belongs in this file.
  ─────────────────────────────────────────────────────────────────────────────
*/

/* ─── IMPORTS ─────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap");

/* ─── SCALE (named steps, not arbitrary px) ──────────────────────────────── */
:root {
  --t-micro:   0.68rem;   /* labels, eyebrows, captions         */
  --t-small:   0.82rem;   /* nav links, utility text            */
  --t-body:    1rem;      /* base body copy                     */
  --t-lead:    1.1rem;    /* slightly larger body / intros      */
  --t-sub:     1.2rem;    /* statement / pull-quote             */
  --t-h3:      1.35rem;   /* card titles, sub-headings          */
  --t-h2:      clamp(2rem, 3.5vw, 3.4rem);    /* section headings  */
  --t-hero:    clamp(3.8rem, 7vw, 7rem);       /* hero display type */

  --lh-tight:  0.9;
  --lh-head:   1.1;
  --lh-body:   1.8;
  --lh-loose:  2;

  --ls-tight:  -0.055em;
  --ls-head:   -0.04em;
  --ls-label:  0.2em;
  --ls-nav:    0.14em;
}

/* ─── BASE ────────────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Inter", sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
}

/* ─── DISPLAY / HEADINGS ─────────────────────────────────────────────────── */
.t-display {
  font-family: "Manrope", sans-serif;
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-section-heading {
  font-family: "Manrope", sans-serif;
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

.t-card-title {
  font-family: "Manrope", sans-serif;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* ─── INTRO / STATEMENT ──────────────────────────────────────────────────── */
.t-intro {
  font-family: "Manrope", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-statement {
  font-family: "Manrope", sans-serif;
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: -0.01em;
}

/* ─── BODY COPY ───────────────────────────────────────────────────────────── */
.t-body {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

.t-body-lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: var(--lh-loose);
}

.t-body-muted {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
}

/* ─── LABELS / EYEBROWS ──────────────────────────────────────────────────── */
.t-label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.t-label-sm {
  font-family: "Inter", sans-serif;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ─── NAV / UI ────────────────────────────────────────────────────────────── */
.t-nav {
  font-family: "Manrope", sans-serif;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.t-nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: var(--ls-nav);
}

.t-cta {
  font-family: "Manrope", sans-serif;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ─── MOBILE TYPE OVERRIDES ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --t-intro: 1.15rem;
    --t-sub:   1.05rem;
  }

  .t-intro { font-size: 1.15rem; }
  .t-statement { font-size: 1.05rem; line-height: 1.65; }
  .t-body-lead { font-size: var(--t-body); }
}