html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

main {
    width: 100%;
}

.section {
    min-height: 100vh;
    padding: var(--section-padding-y) var(--section-padding-x);
    scroll-margin-top: var(--header-height);
}

.section-container {
    max-width: var(--container-width);
    margin: 0 auto;
}

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

h1 {
    font-size: var(--text-3xl);
}

h2 {
    font-size: var(--text-2xl);
}

p {
    color: var(--color-text-muted);
}

a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

.load-error {
    color: red;
    padding: var(--space-sm);
}