/* ============================================
   VoiceBoard — Typography System (iOS HIG)
   Matches Apple SF Pro Dynamic Type Scale
   ============================================ */

/* ── Large Title — Hero elements ── */
.text-large-title {
    font-size: clamp(28px, 4vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.7px;
}

/* ── Title 1 — Page titles ── */
.text-title1 {
    font-size: clamp(24px, 3.5vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    letter-spacing: -0.5px;
}

/* ── Title 2 — Section titles ── */
.text-title2 {
    font-size: clamp(20px, 3vw, var(--font-size-2xl));
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

/* ── Title 3 — Subsection titles ── */
.text-title3 {
    font-size: clamp(17px, 2.5vw, var(--font-size-xl));
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    letter-spacing: -0.2px;
}

/* ── Headline — Card titles, important labels ── */
.text-headline {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.1px;
}

/* ── Body — Default content ── */
.text-body {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.47;
    letter-spacing: -0.1px;
}

/* ── Callout — Emphasized body text ── */
.text-callout {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

/* ── Subheadline — Supporting text ── */
.text-subheadline {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.38;
}

/* ── Footnote — Small descriptions ── */
.text-footnote {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: 1.38;
}

/* ── Caption 1 — Table headers, tiny labels ── */
.text-caption {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: 1.33;
}

/* ── Caption 2 — Smallest text ── */
.text-caption2 {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-tertiary);
    line-height: 1.27;
}

/* ── Overline — Section group labels ── */
.text-overline {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.33;
}

/* ── Text Colors ── */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

/* ── Text Utilities ── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-wrap { white-space: normal; word-break: break-word; }
.text-mono { font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace; font-size: 0.9em; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
.text-balance { text-wrap: balance; }

/* ── Gradient Text ── */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Remove default focus outline from headings targeted by Blazor FocusOnNavigate */
h1:focus, h2:focus, h3:focus {
    outline: none;
}