/**
 * ECOS DESIGN SYSTEM — Typography
 * Sistema tipográfico responsivo com clamp().
 * DEVE ser importado após tokens.css
 *
 * AGENT_GUIDE: Define headings, body, code, lead e label.
 * Para fontes de um player específico, sobrescreva --ecos-font-* no tema do player.
 * Ref: AGENT_GUIDE.md#typography | core/tokens.css (--ecos-font-*, --ecos-text-*)
 */

/* — Headings — */
h1,
.ecos-h1 {
    font-family: var(--ecos-font-display);
    font-size: clamp(var(--ecos-text-4xl), 5vw, var(--ecos-text-6xl));
    font-weight: var(--ecos-font-black);
    line-height: var(--ecos-leading-tight);
    color: var(--ecos-color-text);
    letter-spacing: -0.02em;
}

h2,
.ecos-h2 {
    font-family: var(--ecos-font-display);
    font-size: clamp(var(--ecos-text-3xl), 4vw, var(--ecos-text-5xl));
    font-weight: var(--ecos-font-bold);
    line-height: var(--ecos-leading-tight);
    color: var(--ecos-color-text);
    letter-spacing: -0.01em;
}

h3,
.ecos-h3 {
    font-family: var(--ecos-font-display);
    font-size: clamp(var(--ecos-text-2xl), 3vw, var(--ecos-text-4xl));
    font-weight: var(--ecos-font-bold);
    line-height: var(--ecos-leading-snug);
    color: var(--ecos-color-text);
}

h4,
.ecos-h4 {
    font-size: var(--ecos-text-xl);
    font-weight: var(--ecos-font-semibold);
    line-height: var(--ecos-leading-snug);
    color: var(--ecos-color-text);
}

h5,
.ecos-h5 {
    font-size: var(--ecos-text-lg);
    font-weight: var(--ecos-font-semibold);
    color: var(--ecos-color-text);
}

h6,
.ecos-h6 {
    font-size: var(--ecos-text-base);
    font-weight: var(--ecos-font-semibold);
    color: var(--ecos-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* — Body — */
p,
.ecos-body {
    font-size: var(--ecos-text-base);
    line-height: var(--ecos-leading-relaxed);
    color: var(--ecos-color-text-muted);
}

.ecos-body-lg {
    font-size: var(--ecos-text-lg);
    line-height: var(--ecos-leading-relaxed);
    color: var(--ecos-color-text-muted);
}

.ecos-lead {
    font-size: clamp(var(--ecos-text-lg), 2vw, var(--ecos-text-2xl));
    line-height: var(--ecos-leading-relaxed);
    color: var(--ecos-color-text-muted);
    font-weight: var(--ecos-font-normal);
}

/* — Labels e Legendas — */
.ecos-label {
    font-size: var(--ecos-text-sm);
    font-weight: var(--ecos-font-semibold);
    color: var(--ecos-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ecos-caption {
    font-size: var(--ecos-text-xs);
    color: var(--ecos-color-text-faint);
    line-height: var(--ecos-leading-normal);
}

/* — Código — */
code,
.ecos-code {
    font-family: var(--ecos-font-mono);
    font-size: 0.875em;
    background: var(--ecos-color-surface-2);
    color: var(--ecos-color-primary);
    padding: 0.125rem 0.375rem;
    border-radius: var(--ecos-radius-sm);
    border: 1px solid var(--ecos-color-border-subtle);
}

pre,
.ecos-pre {
    font-family: var(--ecos-font-mono);
    font-size: var(--ecos-text-sm);
    background: var(--ecos-color-surface-2);
    border: 1px solid var(--ecos-color-border);
    border-radius: var(--ecos-radius-lg);
    padding: var(--ecos-space-4) var(--ecos-space-6);
    overflow-x: auto;
    line-height: var(--ecos-leading-relaxed);
}

pre code {
    background: none;
    padding: 0;
    border: none;
    color: var(--ecos-color-text);
}

/* — Destaque / Highlight inline — */
.ecos-highlight {
    color: var(--ecos-color-accent);
    font-weight: var(--ecos-font-semibold);
}

.ecos-highlight-bg {
    background: var(--ecos-color-accent);
    color: var(--ecos-color-text-on-accent);
    padding: 0.1em 0.3em;
    border-radius: var(--ecos-radius-sm);
}

/* — Underline decorativo — */
.ecos-underline-accent {
    border-bottom: 3px solid var(--ecos-color-accent);
    padding-bottom: 0.1em;
    display: inline;
}

/* — Blockquote — */
blockquote,
.ecos-blockquote {
    border-left: 4px solid var(--ecos-color-accent);
    padding-left: var(--ecos-space-4);
    color: var(--ecos-color-text-muted);
    font-style: italic;
    font-size: var(--ecos-text-lg);
    line-height: var(--ecos-leading-relaxed);
}

/* — Número Estatístico Grande — */
.ecos-stat-display {
    font-family: var(--ecos-font-display);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: var(--ecos-font-black);
    color: var(--ecos-color-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}