*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-primary);
    font-family: Sora, "Avenir Next", "Segoe UI", sans-serif;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin: 0 0 var(--space-md);
}

p {
    margin: 0 0 var(--space-md);
    color: var(--text-secondary);
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 550, "GRAD" 0, "opsz" 24;
    font-size: 1.1em;
    line-height: 1;
    vertical-align: middle;
}

a {
    color: inherit;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button, a, input, select, textarea, [role="button"] {
    outline: none;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    box-shadow: var(--ring);
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

legend {
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: -999px;
    z-index: 1000;
}

.skip-link:focus {
    left: 16px;
    top: 16px;
    background: var(--accent);
    color: var(--accent-contrast-strong);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}