/* =========================================================
   typography.css — type system
========================================================= */

.overline {
    display: inline-block;
    font-size: var(--fs-overline);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--teal);
}

.display {
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: .92;
    letter-spacing: var(--tracking-display);
}

.h1 {
    font-size: clamp(2.2rem, 1.6rem + 3vw, 3.75rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: var(--tracking-tight);
}

.h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
}

.h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 400;
}

.body {
    color: var(--ink-soft);
}

/* One accent hue per section: sections may set --accent; default = teal. */
.text-gradient {
    background: linear-gradient(115deg,
        var(--accent, var(--teal)) 0%,
        var(--navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Dark-canvas variant — teal -> light-mint, for headings sitting on navy
   backgrounds where teal -> navy would vanish into the canvas. */
.text-gradient--dark {
    background: linear-gradient(115deg, var(--teal) 0%, #b7f0e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-balance {
    text-wrap: balance;
}

.measure {
    max-width: 62ch;
}

.measure--tight {
    max-width: 46ch;
}