/* AI Agency Toolkit — Type System v1
   Strict scale. Every page picks from these tokens. No bespoke sizes.

   Three voices:
     Crimson Pro (serif)  — prose: titles, taglines, lead, body
     JetBrains Mono       — instrument: headings, buttons, structural labels
     Space Mono           — metadata: kickers, micro, decorative caps

   Token map:
     DISPLAY     t-hero / t-hero-xl
     HEADING     t-h2 / t-h3 / t-h2-serif
     BODY        t-lead / t-body / t-small
     LABEL       t-button / t-eyebrow
     METADATA    t-kicker / t-micro
     COLOR       t-text-strong / t-text-medium / t-text-low / t-text-faint
*/

/* ─────── DISPLAY TIER ─────── */
.t-hero {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 300;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.t-hero-xl {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 300;
  font-size: 72px;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.t-hero em, .t-hero-xl em,
.t-hero .em, .t-hero-xl .em {
  font-style: italic;
  font-weight: 400;
}

/* ─────── HEADING TIER ─────── */
.t-h2 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-h3 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.t-h2-serif {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* ─────── BODY TIER ─────── */
.t-lead {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
}
.t-body {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}
.t-small {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

/* ─────── LABEL TIER (mono, structural) ─────── */
.t-button {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.t-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ─────── METADATA TIER (Space Mono, decorative) ─────── */
.t-kicker {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.t-micro {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─────── COLOR HELPERS ─────── */
.t-text-strong { color: #1a1a2e; }
.t-text-medium { color: rgba(0, 0, 0, 0.65); }
.t-text-low    { color: rgba(0, 0, 0, 0.40); }
.t-text-faint  { color: rgba(0, 0, 0, 0.30); }

/* Dark-mode variants — pages opt in by adding `.dark` to a parent
   (matches site-nav.js useTheme dark-mode tokens). */
.dark .t-text-strong { color: #ffffff; }
.dark .t-text-medium { color: rgba(255, 255, 255, 0.65); }
.dark .t-text-low    { color: rgba(255, 255, 255, 0.40); }
.dark .t-text-faint  { color: rgba(255, 255, 255, 0.30); }

/* ─────── MOBILE (≤ 720px) ─────── */
@media (max-width: 720px) {
  .t-hero        { font-size: 36px; }
  .t-hero-xl     { font-size: 48px; }
  .t-h2,
  .t-h2-serif    { font-size: 22px; }
  .t-h3          { font-size: 14px; }
  .t-lead        { font-size: 17px; }
  .t-body        { font-size: 15px; }
  .t-button,
  .t-kicker      { font-size: 11px; }
  .t-eyebrow     { font-size: 10px; }
  .t-micro       { font-size: 9px; }
}

/* Reduced motion — no typography animation/transition by default,
   but anything page-side that animates type should respect this. */
@media (prefers-reduced-motion: reduce) {
  .t-hero, .t-hero-xl, .t-h2, .t-h3,
  .t-lead, .t-body, .t-small,
  .t-button, .t-eyebrow, .t-kicker, .t-micro {
    transition: none !important;
    animation: none !important;
  }
}