/* =========================================================
   GD Project Solutions — Typography
   Inter Tight everywhere; IBM Plex Mono for module codes,
   metadata, technical labels and small uppercase system text.
   ========================================================= */

:root {
  /* ---------- Stacks ---------- */
  --font-sans: "Inter Tight", Inter, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* ---------- Scale (t-shirt) ---------- */
  --t-eyebrow-size: 11px;   --t-eyebrow-lh: 16px;   --t-eyebrow-tracking: 0.14em;
  --t-mono-size:    12px;   --t-mono-lh:    18px;   --t-mono-tracking:    0.04em;
  --t-small-size:   13px;   --t-small-lh:   20px;
  --t-body-size:    15px;   --t-body-lh:    24px;
  --t-lede-size:    17px;   --t-lede-lh:    26px;
  --t-h4-size:      18px;   --t-h4-lh:      24px;
  --t-h3-size:      22px;   --t-h3-lh:      28px;
  --t-h2-size:      32px;   --t-h2-lh:      38px;
  --t-h1-size:      48px;   --t-h1-lh:      52px;
  --t-claim-size:   64px;   --t-claim-lh:   64px;

  /* ---------- Weights ---------- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semi:    600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* ---------- Tracking ---------- */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-mono:    0.04em;
  --tracking-loose:   0.08em;
  --tracking-eyebrow: 0.14em;
}

/* =========================================================
   Semantic typography classes
   ========================================================= */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-eyebrow--copper  { color: var(--accent-text); }
.t-eyebrow--on-dark { color: var(--accent-text-on-dark); }

/* Eyebrow with a copper rule — the canonical section kicker. */
.t-eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.t-eyebrow--rule::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent-decor);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-lh);
  letter-spacing: var(--tracking-mono);
  font-feature-settings: "tnum";
}

.t-claim {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(38px, 5.6vw, var(--t-claim-size));
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.t-claim em { font-style: normal; color: var(--accent-text); }

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(32px, 4.2vw, var(--t-h1-size));
  line-height: var(--t-h1-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(26px, 3vw, var(--t-h2-size));
  line-height: var(--t-h2-lh);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.t-h2 em { font-style: normal; color: var(--accent-text); }

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  color: var(--fg);
}

.t-lede {
  font-family: var(--font-sans);
  font-size: var(--t-lede-size);
  line-height: var(--t-lede-lh);
  color: var(--fg-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--fg-muted);
}