body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-dark);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--color-text-dark);
}

h1 {
    font-size: var(--text-hero);
    font-weight: 900;
    line-height: 1.1;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary);
}

h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
}

h4 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
}

p {
    font-size: var(--text-base);
    line-height: 1.6;
}

a {
    color: inherit;
    transition: var(--transition);
}

a:hover {
    opacity: 0.8;
}

strong {
    font-weight: 700;
}

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

@media (max-width: 1024px) {
    h1 {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
}