h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

h1, h2, h3 { color: var(--color-text-secondary); }
h4, h5, h6 { color: var(--color-text-tertiary); }

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    font-optical-sizing: auto;
}

.large-text {
    font-size: var(--font-size-body-lg);
}

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

.alt-text {
    color: var(--color-interactive-default);
}

.accent-text {
    color: var(--color-brand-accent);
}

.light-text {
    color: var(--color-text-light);
}

@media (max-width: 767px) {
    h1 { font-size: var(--font-size-h2); }
    h2 { font-size: var(--font-size-h3); }
}