/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--text-primary);
    background-color: var(--surface-base);
    letter-spacing: 0.005em;
}

/* ---------- DISPLAY / HERO ---------- */
.t-hero {
    font-family: var(--font-serif);
    font-size: var(--fs-hero);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

.t-display {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

/* ---------- HEADINGS ---------- */
.t-h1,
h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

.t-h2,
h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

.t-h3,
h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-snug);
}

.t-h4,
h4 {
    font-family: var(--font-serif);
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: var(--lh-normal);
}

.t-h5,
h5 {
    font-family: var(--font-serif);
    font-size: var(--fs-h5);
    font-weight: 500;
    line-height: var(--lh-normal);
}

.t-h6,
h6 {
    font-family: var(--font-sans);
    font-size: var(--fs-h6);
    font-weight: 500;
    line-height: var(--lh-normal);
    letter-spacing: 0.01em;
}

/* ---------- EYEBROW ---------- */
.t-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-accent);
}

.t-eyebrow--muted {
    color: var(--text-secondary);
}

.t-eyebrow--on-dark {
    color: var(--text-accent);
}

/* ---------- BODY ---------- */
.t-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    font-weight: 300;
    color: var(--text-secondary);
}

.t-body {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

.t-body-lg {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}

.t-caption {
    font-size: var(--fs-caption);
    line-height: 1.5;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
}

/* ---------- LINKS ---------- */
.t-link {
    color: var(--text-primary);
    border-bottom: 1px solid var(--rule-medium);
    transition: border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.t-link:hover {
    color: var(--text-accent);
    border-color: var(--rule-brass);
}

/* ---------- ON DARK ---------- */
.on-dark {
    color: var(--text-on-dark);
}

.on-dark .t-eyebrow {
    color: var(--text-accent);
}

.on-dark .t-lead,
.on-dark .t-body,
.on-dark .t-body-lg {
    color: var(--text-on-dark-2);
}

.on-dark .t-caption {
    color: var(--text-on-dark-3);
}

.on-dark .t-link {
    color: var(--text-on-dark);
    border-color: var(--rule-dark);
}

.on-dark .t-link:hover {
    color: var(--text-accent);
    border-color: var(--rule-brass);
}

/* ---------- EMPHASIS ---------- */
.t-serif {
    font-family: var(--font-serif);
}

.t-sans {
    font-family: var(--font-sans);
}

.t-italic {
    font-style: italic;
}

.t-light {
    font-weight: 300;
}

.t-medium {
    font-weight: 500;
}

/* ---------- BALANCE / PRETTY ---------- */
.t-balance {
    text-wrap: balance;
}

.t-pretty {
    text-wrap: pretty;
}