:root {
    color-scheme: light dark;
    --color-background: light-dark(#fafaf7, #111315);
    --color-surface: light-dark(#ffffff, #1a1d1f);
    --color-text: light-dark(#1c1c1c, #e8e8e8);
    --color-muted: light-dark(#6b7280, #9ca3af);
    --color-accent: light-dark(#2563eb, #60a5fa);
    --color-accent-hover: light-dark(#1d4ed8, #93c5fd);
    --color-border: light-dark(#e5e7eb, #2a2e33);
    --radius: 6px;
    --space: 1rem;
}

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

body {
    /* Geometric Humanist via Modern Font Stack (source https://modernfontstacks.com) */
    font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.6;
    max-width: 48rem;
    margin: 2rem auto;
    padding: 0 var(--space);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;

    & small {
        color: var(--color-muted);
        font-weight: 400;
    }
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    &:hover {
        color: var(--color-accent-hover);
    }
}

ul,
ol {
    padding-left: 1.25rem;

    & li + li {
        margin-top: 0.35rem;
    }
}

form {
    display: grid;
    gap: 0.75rem;

    & label {
        font-weight: 600;
        font-size: 0.9rem;
    }
}

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

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
textarea,
select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;

    &:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
    }

    &:disabled,
    &[readonly] {
        background: var(--color-background);
        color: var(--color-muted);
        cursor: not-allowed;
        box-shadow: none;
    }
}

form label:has(+ :disabled),
form label:has(+ [readonly]) {
    color: var(--color-muted);
}

button,
input[type=submit],
input[type=button] {
    padding: 0.55rem 1rem;
    background: var(--color-accent);
    color: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;

    &:hover {
        background: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
    }
}

code,
pre {
    /* Monospace Code via Modern Font Stack (source https://modernfontstacks.com) */
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

code {
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
}

pre {
    padding: 0.75rem 1rem;
    overflow-x: auto;
}

img {
    max-width: 48rem;
}

nav a + a {
    margin-left: 1rem;
}