/**
 * SITEBUILDER - Sistema tipográfico
 * Sora (display, geométrica, tech/premium) + Inter (body, alta legibilidad)
 * + Fraunces (serif editorial, para composiciones boutique/beige).
 */

@import url('fonts.css');

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6,
.text-display {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    font-weight: 700;
    color: var(--text-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

.text-display-1 { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-display-2 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-display-3 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

.text-serif { font-family: var(--font-serif); font-weight: 500; font-style: normal; letter-spacing: var(--tracking-normal); }
.text-serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 500; }

.text-lead {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    font-weight: 400;
}

.text-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--accent);
}

.text-eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    flex-shrink: 0;
}

.text-caption {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-inverse { color: var(--text-inverse); }
.text-accent { color: var(--accent); }

.text-number {
    font-family: var(--font-number);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.text-number-lg { font-size: var(--text-6xl); }
.text-number-md { font-size: var(--text-4xl); }
.text-number-sm { font-size: var(--text-2xl); }

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

p {
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .text-display-1 { font-size: var(--text-5xl); }
    .text-display-2 { font-size: var(--text-4xl); }
}