/* brand_v2 base — resets, body layout, typography.
   Theme variables come from theme.css (generated at build time). */

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

body {
    font-family: var(--font-family);
    background: var(--color-body);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

main {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100%;
}
main h1 { font-size: 2rem; margin-bottom: 1rem; }

.page-content { line-height: 1.7; }
.page-content p { margin-bottom: 1rem; }
.page-content h2 { font-size: 1.4rem; margin: 1.5rem 0 0.75rem; color: var(--color-accent); }
.page-content h3 { font-size: 1.15rem; margin: 1.25rem 0 0.5rem; }
.page-content ul, .page-content ol { margin: 0.5rem 0 1rem 1.5rem; }
.page-content li { margin-bottom: 0.25rem; }
.page-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* === Focus visible (keyboard navigation) === */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

@media (max-width: 768px) {
    main { padding: 1.25rem 1rem; }
}