/**
 * Builder V8 — Typography System
 * Heading/body type scale using --font-heading, --font-body, and clamp() sizes.
 * Satisfies AC4, AC14 (Google Fonts link is added per-page by GeneratorAgent).
 */

/* ---- Base body type ---- */
body {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: 1.7;
    color: var(--color-text-primary, #0f172a);
}

/* ---- Headings ---- */
h1, .v8-h1 {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #0f172a);
}

h2, .v8-h2 {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

h3, .v8-h3 {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.2;
}

h4, .v8-h4 {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
}

h5, .v8-h5 {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
}

h6, .v8-h6 {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
}

/* ---- Paragraphs ---- */
p {
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    line-height: 1.7;
    color: var(--color-text-secondary, #475569);
    margin-bottom: var(--space-4, 1rem);
}

p:last-child {
    margin-bottom: 0;
}

/* ---- Lead / intro text ---- */
.v8-lead {
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.6;
    color: var(--color-text-secondary, #475569);
}

.v8-lead--xl {
    font-size: var(--text-xl, 1.25rem);
}

/* ---- Small / caption ---- */
.v8-caption {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-light, #94a3b8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---- Section labels ---- */
.v8-section-label {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary, #2563eb);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-4, 1rem);
}

/* ---- On dark backgrounds ---- */
.v8-bg-dark h1, .v8-bg-dark h2, .v8-bg-dark h3,
.v8-bg-dark h4, .v8-bg-dark h5, .v8-bg-dark h6,
.v8-bg-gradient h1, .v8-bg-gradient h2, .v8-bg-gradient h3 {
    color: var(--color-text-on-dark, #f8fafc);
}

.v8-bg-dark p, .v8-bg-dark .v8-lead,
.v8-bg-gradient p, .v8-bg-gradient .v8-lead {
    color: rgba(248, 250, 252, 0.8);
}