:root {
    color-scheme: light dark;

    --bg: #ffffff;
    --text: #111111;
    --muted: #444444;
    --link: #0b57d0;
    --border: #e5e7eb;
    --focus: #ffb000;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0b0f14;
        --text: #f3f4f6;
        --muted: #cbd5e1;
        --link: #8ab4f8;
        --border: #1f2937;
        --focus: #ffd166;
    }
}

/* Manual: light (forces light even when OS is dark) */
:root[data-theme="light"] {
    color-scheme: light;

    --bg: #ffffff;
    --text: #111111;
    --muted: #444444;
    --link: #0b57d0;
    --border: #e5e7eb;
    --focus: #ffb000;
}

/* Manual: dark */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0b0f14;
    --text: #f3f4f6;
    --muted: #cbd5e1;
    --link: #8ab4f8;
    --border: #1f2937;
    --focus: #ffd166;
}

/* Manual: high contrast */
:root[data-theme="contrast"] {
    color-scheme: dark;

    --bg: #000000;
    --text: #ffdd00; /* recommended yellow */
    --muted: #ffdd00;
    --link: #00ffff;
    --border: #ffffff;
    --focus: #ffdd00;
}

/* Auto high-contrast when user requests it (only if no manual theme set) */
@media (prefers-contrast: more) {
    :root:not([data-theme]) {
        --bg: #000000;
        --text: #ffffff;
        --muted: #ffffff;
        --link: #00ffff;
        --border: #ffffff;
        --focus: #ffff00;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Links: not color-only (WCAG-friendly) */
a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 3px;
}

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.main {
    max-width: 72ch;
    padding: 24px 16px;
    margin: 0 auto;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
}

.skip-link:focus-visible {
    left: 12px;
    top: 12px;
    padding: 8px 12px;
    border: 2px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.site-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.site-header nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.site-header nav a {
    padding: 6px 8px;
}

.site-header nav a[aria-current="page"] {
    font-weight: 700;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.22em;
}

.theme-switcher fieldset {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    border: 1px solid var(--border);
    padding: 8px 12px;
}

.theme-switcher label {
    margin-right: 12px;
}

.site-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin: 0 0 0.6em;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.35rem;
    margin-top: 1.6em;
}

p {
    margin: 0 0 1em;
}

ul {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

li {
    margin: 0.3em 0;
}

/* Better rhythm for markdown blocks */
.main > *:first-child {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
    :root {
        forced-color-adjust: auto;
    }
}