/* Typography */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

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

.lead, .text-intro {
    font-size: var(--text-lg);
    color: var(--color-text-body);
    line-height: 1.6;
}

.text-sm {
    font-size: var(--text-sm);
}

.text-xs, .text-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

a.link {
    color: var(--color-accent-blue-dark);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-fast);
}

a.link:hover {
    text-decoration-color: var(--color-accent-blue-dark);
}

code, pre, .font-mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

pre {
    background-color: var(--color-gray-900);
    color: var(--color-gray-50);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-primary { color: var(--color-primary-navy); }
.text-accent { color: var(--color-accent-blue); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-text-white); }