:root {
    --palette-forest: #315e52;
    --palette-ink: #343b3c;
    --palette-muted: #626a69;
    --palette-paper: #f8f9f7;
    --palette-line: #d5d9d5;
    --site-content-width: 70ch;
    --site-section-space: 2rem;
}

:root, [data-theme="light"] {
    --site-canvas: var(--palette-paper);
    --site-surface: #ffffff;
    --site-inset: #eef1ed;
    --site-ink: var(--palette-ink);
    --site-heading: #293e35;
    --site-muted: var(--palette-muted);
    --site-line: var(--palette-line);
    --site-control-line: #85958a;
    --site-accent: var(--palette-forest);
    --site-accent-hover: #24483e;
    --site-on-accent: #ffffff;
    --site-secondary: #5a6c60;
    --site-secondary-hover: #46594c;
    --site-secondary-text: #5a6c60;
    --site-secondary-text-hover: #46594c;
    --site-on-secondary: #ffffff;
    --site-contrast: #293e35;
    --site-on-contrast: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --site-canvas: #18211c;
        --site-surface: #202c24;
        --site-inset: #25342b;
        --site-ink: #e0e9e2;
        --site-heading: #eff5f0;
        --site-muted: #acbcb0;
        --site-line: #405348;
        --site-control-line: #718478;
        --site-accent: #a8c9b5;
        --site-accent-hover: #c3decf;
        --site-on-accent: #15251c;
        --site-secondary: #536e5d;
        --site-secondary-hover: #597562;
        --site-secondary-text: #acbcb0;
        --site-secondary-text-hover: #d7e4db;
        --site-on-secondary: #ffffff;
        --site-contrast: #e0e9e2;
        --site-on-contrast: #18211c;
    }
}

[data-theme="dark"] {
    --site-canvas: #18211c;
    --site-surface: #202c24;
    --site-inset: #25342b;
    --site-ink: #e0e9e2;
    --site-heading: #eff5f0;
    --site-muted: #acbcb0;
    --site-line: #405348;
    --site-control-line: #718478;
    --site-accent: #a8c9b5;
    --site-accent-hover: #c3decf;
    --site-on-accent: #15251c;
    --site-secondary: #536e5d;
    --site-secondary-hover: #597562;
    --site-secondary-text: #acbcb0;
    --site-secondary-text-hover: #d7e4db;
    --site-on-secondary: #ffffff;
    --site-contrast: #e0e9e2;
    --site-on-contrast: #18211c;
}

:root:not([data-theme]), :root[data-theme="light"], :root[data-theme="dark"], [data-theme="light"], [data-theme="dark"] {
    --pico-background-color: var(--site-canvas);
    --pico-color: var(--site-ink);
    --pico-h1-color: var(--site-heading);
    --pico-h2-color: var(--site-heading);
    --pico-h3-color: var(--site-heading);
    --pico-h4-color: var(--site-heading);
    --pico-h5-color: var(--site-heading);
    --pico-h6-color: var(--site-heading);
    --pico-muted-color: var(--site-muted);
    --pico-muted-border-color: var(--site-line);
    --pico-primary: var(--site-accent);
    --pico-primary-background: var(--site-accent);
    --pico-primary-border: var(--site-accent);
    --pico-primary-inverse: var(--site-on-accent);
    --pico-primary-hover: var(--site-accent-hover);
    --pico-primary-hover-background: var(--site-accent-hover);
    --pico-primary-hover-border: var(--site-accent-hover);
    --pico-primary-focus: #698f7e55;
    --pico-primary-underline: #698f7e88;
    --pico-secondary: var(--site-secondary-text);
    --pico-secondary-background: var(--site-secondary);
    --pico-secondary-border: var(--site-secondary);
    --pico-secondary-inverse: var(--site-on-secondary);
    --pico-secondary-hover: var(--site-secondary-text-hover);
    --pico-secondary-hover-background: var(--site-secondary-hover);
    --pico-secondary-hover-border: var(--site-secondary-hover);
    --pico-secondary-focus: #698f7e55;
    --pico-contrast: var(--site-contrast);
    --pico-contrast-background: var(--site-contrast);
    --pico-contrast-border: var(--site-contrast);
    --pico-contrast-inverse: var(--site-on-contrast);
    --pico-contrast-hover: var(--site-accent);
    --pico-contrast-hover-background: var(--site-accent);
    --pico-contrast-hover-border: var(--site-accent);
    --pico-contrast-focus: #698f7e55;
    --pico-card-background-color: var(--site-surface);
    --pico-card-sectioning-background-color: var(--site-inset);
    --pico-dropdown-background-color: var(--site-surface);
    --pico-dropdown-border-color: var(--site-line);
    --pico-dropdown-color: var(--site-ink);
    --pico-dropdown-hover-background-color: var(--site-inset);
    --pico-form-element-background-color: var(--site-surface);
    --pico-form-element-selected-background-color: var(--site-inset);
    --pico-form-element-color: var(--site-ink);
    --pico-form-element-placeholder-color: var(--site-muted);
    --pico-form-element-border-color: var(--site-control-line);
    --pico-form-element-active-background-color: var(--site-surface);
    --pico-form-element-active-border-color: var(--site-accent);
    --pico-form-element-focus-color: #698f7e55;
    --pico-code-background-color: var(--site-inset);
    --pico-code-color: var(--site-accent);
    --pico-mark-background-color: #e6ce8b;
    --pico-mark-color: #343521;
    --pico-text-selection-color: #698f7e55;
    --pico-range-border-color: var(--site-control-line);
    --pico-range-active-border-color: var(--site-accent);
    --pico-range-thumb-color: var(--site-accent);
    --pico-progress-color: var(--site-accent);
    accent-color: var(--site-accent);
    scrollbar-color: var(--site-control-line) var(--site-canvas);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--pico-primary);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 1100;
    padding: 0.75rem 1rem;
    background: var(--pico-background-color);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

.welcome {
    max-inline-size: var(--site-content-width);
    padding-block: var(--site-section-space);
}

.welcome h1,
.site-navigation {
    overflow-wrap: anywhere;
}

.site-navigation {
    flex-wrap: wrap;
    column-gap: 1rem;
}

.site-navigation > ul {
    min-inline-size: 0;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .site-navigation > ul {
        flex-basis: 100%;
        margin-inline: 0;
    }

    .site-navigation > ul > li {
        max-inline-size: 100%;
        padding-inline: 0;
    }

    .site-navigation > ul + ul {
        column-gap: var(--pico-spacing);
    }
}