/* Explain: Base reset, typography, and page behavior styles with accessibility options. - */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    display: block;
}

::selection {
    background: var(--primary-color);
    color: #FFFFFF;
}

:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 4px;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility Classes */
html.a11y-text {
    font-size: 115% !important;
}
html.a11y-contrast {
    filter: contrast(130%) brightness(110%);
}
html.a11y-links a {
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}
html.a11y-font * {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.02em !important;
}