@layer base {
    :root {
        color-scheme: light dark;
        --sans-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
        --serif-font: ui-serif, Georgia, Cambria, "Times New Roman", serif;
        --mono-font: ui-monospace, Consolas, Menlo, Monaco, monospace;
        --standard-border-radius: 8px;
        --border-width: 1px;

        --color-background: oklch(100% 0 0);
        --color-sidebar: oklch(96.7% 0.003 264.5);
        --color-brand: oklch(56.9% 0.237 260.4);
        --color-card: oklch(96.7% 0.003 264.5);
        --color-border: oklch(87.2% 0.011 261.8);
        --color-input: oklch(100% 0 0);
        --color-foreground: oklch(0% 0 0);
        --color-muted: oklch(90% 0.002 247.8);
        --color-muted-foreground: oklch(55.6% 0.002 286.4);
        --color-success: oklch(63% 0.180 148.5);
        --color-info: oklch(62.2% 0.205 259.6);
        --color-error: oklch(63.8% 0.237 25.4);
        --color-warning: oklch(79.6% 0.163 84.5);
        --color-action: oklch(42.4% 0.198 265.5);

        --bg: light-dark(var(--color-background), oklch(24% 0 0));
        --accent-bg: light-dark(var(--color-card), oklch(29% 0 0));
        --text: light-dark(var(--color-foreground), oklch(89% 0 0));
        --text-light: light-dark(var(--color-muted-foreground), oklch(72% 0 0));
        --border: light-dark(var(--color-border), oklch(40% 0.01 262));
        --accent: light-dark(var(--color-brand), oklch(72% 0.17 260));
        --accent-hover: oklch(from var(--accent) calc(l + 0.12) c h);
        --accent-text: var(--bg);
        --code: light-dark(oklch(55% 0.21 5), oklch(69% 0.17 5));
        --preformatted: light-dark(oklch(36% 0 0), oklch(83% 0 0));
        --marked: oklch(90% 0.17 95);
        --disabled: light-dark(var(--color-muted), oklch(17% 0 0));
    }

    @media (prefers-color-scheme: dark) {

        img,
        video {
            opacity: 0.8;
        }
    }

    html {
        font-family: var(--sans-font);
    }

    body {
        color: var(--text);
        background-color: var(--bg);
        font-size: 1.15rem;
        line-height: 1.5;
        display: grid;
        grid-template-columns: 1fr min(45rem, 90%) 1fr;
        align-content: start;

        >* {
            grid-column: 2;
        }

        >header {
            background-color: var(--accent-bg);
            border-bottom: var(--border-width) solid var(--border);
            text-align: center;
            padding: 0 0.5rem 2rem;
            grid-column: 1 / -1;

            > :only-child {
                margin-block-start: 2rem;
            }

            h1 {
                max-width: 1200px;
                margin: 1rem auto;
            }

            p {
                max-width: 40rem;
                margin: 1rem auto;
            }
        }

        >footer {
            margin-top: 4rem;
            padding: 2rem 1rem 1.5rem;
            color: var(--text-light);
            font-size: 0.9rem;
            text-align: center;
            border-top: var(--border-width) solid var(--border);
        }
    }

    main {
        padding-top: 1.5rem;
    }

    /* Fluid type */
    h1 {
        font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3rem);
    }

    h2 {
        font-size: clamp(2.1rem, 1.6rem + 2vw, 2.6rem);
    }

    h3 {
        font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2rem);
    }

    h4 {
        font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.44rem);
    }

    h5 {
        font-size: 1.15rem;
    }

    h6 {
        font-size: 0.96rem;
    }

    h1,
    h2,
    h3 {
        line-height: 1.1;
    }

    /* Vertical rhythm — explicit, replaces UA defaults killed by the reset */
    h1 {
        margin-block: 1rem;
    }

    h2,
    h3 {
        margin-block: 3rem 1rem;
    }

    h4,
    h5,
    h6 {
        margin-block: 1.5rem 0.75rem;
    }

    p {
        margin-block: 1.5rem;
    }

    ul,
    ol {
        margin-block: 1.5rem;
        padding-inline-start: 2rem;
    }

    dl {
        margin-block: 1.5rem;
    }

    dd {
        margin-inline-start: 2rem;
    }

    /* Nested lists don't double up */
    :is(ul, ol) :is(ul, ol) {
        margin-block: 0.25rem;
    }

    /* Lists used as structure, not content */
    ul:where([role="list"], .plain-list),
    ol:where([role="list"], .plain-list) {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    fieldset legend {
        font-weight: bold;
        padding-inline: 0.25rem;
    }

    a {
        color: var(--accent);

        &:hover {
            text-decoration: none;
        }
    }

    abbr[title] {
        cursor: help;
        text-decoration: underline dotted;
    }

    button,
    .button,
    input:is([type="submit"], [type="reset"], [type="button"]) {
        border: var(--border-width) solid var(--accent);
        background-color: var(--accent);
        color: var(--accent-text);
        padding: 0.5em;
        text-decoration: none;
        line-height: normal;

        &:enabled:hover,
        &:any-link:not([aria-disabled="true"]):hover {
            background-color: var(--accent-hover);
            border-color: var(--accent-hover);
            cursor: pointer;
        }

        &:enabled:focus-visible,
        &:any-link:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 1px;
        }
    }

    .button[aria-disabled="true"],
    :is(button, input, textarea, select):disabled {
        cursor: not-allowed;
        background-color: var(--disabled);
        border-color: var(--disabled);
        color: var(--text-light);
    }

    input[type="range"] {
        padding: 0;
        appearance: auto;
        accent-color: var(--accent);
    }

    /* Navigation */
    header nav {
        font-size: 1rem;
        line-height: 2;
        padding-top: 1rem;
        text-align: center;

        :is(ul, ol) {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0 0.25rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        a {
            margin: 0 0.5rem 1rem;
            border: var(--border-width) solid var(--border);
            border-radius: var(--standard-border-radius);
            color: var(--text);
            display: inline-block;
            padding: 0.1rem 1rem;
            text-decoration: none;

            &:hover,
            &.current,
            &[aria-current="page"],
            &[aria-current="true"] {
                background: var(--bg);
                border-color: var(--accent);
                color: var(--accent);
                cursor: pointer;
            }
        }

        @media (width <=720px) {
            a {
                border: none;
                padding: 0;
                text-decoration: underline;
                line-height: 1;

                &.current {
                    background: none;
                }
            }
        }
    }

    /* Boxes */
    aside,
    details,
    pre,
    progress {
        background-color: var(--accent-bg);
        border: var(--border-width) solid var(--border);
        border-radius: var(--standard-border-radius);
        margin-bottom: 1rem;
    }

    aside {
        font-size: 1rem;
        width: 30%;
        padding: 0 15px;
        margin-inline-start: 15px;
        float: inline-end;

        @media (width <=720px) {
            width: 100%;
            float: none;
            margin-inline-start: 0;
        }
    }

    article,
    fieldset,
    dialog {
        border: var(--border-width) solid var(--border);
        padding: 1rem;
        border-radius: var(--standard-border-radius);
        margin-bottom: 1rem;
    }

    :is(article, section) :is(h2, h3):first-child {
        margin-top: 0rem;
    }

    section {
        border-block: var(--border-width) solid var(--border);
        padding: 2rem 1rem;
        margin-block: 3rem;

        &+section,
        &:first-child {
            border-top: 0;
            padding-top: 0;
        }

        &+section {
            margin-top: 0;
        }

        &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
    }

    details {
        padding: 0.7rem 1rem;

        summary {
            cursor: pointer;
            font-weight: bold;
            padding: 0.7rem 1rem;
            margin: -0.7rem -1rem;
            word-break: break-word;
        }

        &[open] {
            >summary {
                margin-bottom: 0.5rem;

                +* {
                    margin-top: 0;
                }
            }

            > :last-child {
                margin-bottom: 0;
            }
        }

        h2:first-of-type {
            margin-top: 0;
        }
    }

    /* Tables */
    table {
        border-collapse: collapse;
        margin-block: 1.5rem;

        caption {
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
    }

    figure>table {
        width: max-content;
        margin: 0;
    }

    td,
    th {
        border: var(--border-width) solid var(--border);
        text-align: start;
        padding: 0.5rem;
    }

    th {
        background-color: var(--accent-bg);
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: var(--accent-bg);
    }

    /* Forms */
    textarea,
    select,
    input {
        font-size: inherit;
        padding: 0.5em;
        margin-bottom: 0.5rem;
        border-radius: var(--standard-border-radius);
        box-shadow: none;
        max-width: 100%;
        display: inline-block;
    }
    
    button,
    .button {
        padding: 0.5em 1em;
        border-radius: 9999px;
        font-weight: 900;
    }

    textarea,
    select,
    input {
        color: var(--text);
        background-color: var(--bg);
        border: var(--border-width) solid var(--border);

        @media (width <=720px) {
            width: 100%;
        }
    }

    label {
        display: block;
    }

    textarea:not([cols]) {
        width: 100%;
    }

    select:not([multiple]) {
        background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
            linear-gradient(135deg, var(--text) 51%, transparent 49%);
        background-position: calc(100% - 15px), calc(100% - 10px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-inline-end: 25px;

        [dir="rtl"] & {
            background-position: 10px, 15px;
        }
    }

    /* Native checkbox/radio with accent-color */
    input:is([type="checkbox"], [type="radio"]) {
        appearance: auto;
        accent-color: var(--accent);
        vertical-align: middle;
        width: min-content;

        +label {
            display: inline-block;
        }
    }

    input[type="color"] {
        height: 2.5rem;
        padding: 0.2rem;
    }

    input[type="file"] {
        border: 0;
    }

    /* Validation feedback only after interaction */
    :is(input, textarea, select):user-invalid {
        border-color: var(--code);
    }

    /* Misc */
    hr {
        border: none;
        height: var(--border-width);
        background: var(--border);
        margin: 1rem auto;
    }

    mark {
        padding: 2px 5px;
        border-radius: var(--standard-border-radius);
        background-color: var(--marked);
        color: oklch(0% 0 0);

        a {
            color: var(--accent);
        }
    }

    img,
    video {
        border-radius: var(--standard-border-radius);
    }

    figure {
        display: block;
        overflow-x: auto;
        margin-block: 1.5rem;

        >img,
        >picture>img {
            margin-inline: auto;
        }
    }

    figcaption {
        position: sticky;
        left: 0;
        text-align: center;
        font-size: 0.9rem;
        color: var(--text-light);
        margin-block: 1rem;
    }

    blockquote {
        margin-inline: 2rem 0;
        margin-block: 2rem;
        padding: 0.4rem 0.8rem;
        border-inline-start: 0.35rem solid var(--accent);
        color: var(--text-light);
        font-style: italic;
    }

    cite {
        font-size: 0.9rem;
        color: var(--text-light);
        font-style: normal;
    }

    dt {
        color: var(--text-light);
    }

    /* Code */
    code,
    kbd,
    samp {
        font-family: var(--mono-font);
        color: var(--code);
    }

    kbd {
        color: var(--preformatted);
        border: var(--border-width) solid var(--preformatted);
        border-bottom-width: 3px;
        border-radius: var(--standard-border-radius);
        padding: 0.1rem 0.4rem;
    }

    pre {
        font-family: var(--mono-font);
        padding: 1rem 1.4rem;
        max-width: 100%;
        overflow: auto;
        color: var(--preformatted);

        code {
            color: inherit;
            background: none;
            padding: 0;
        }
    }

    /* Progress */
    progress {
        width: 100%;
        accent-color: var(--accent);

        &:indeterminate {
            background-color: var(--accent-bg);
        }

        &::-webkit-progress-bar {
            border-radius: var(--standard-border-radius);
            background-color: var(--accent-bg);
        }

        &::-webkit-progress-value {
            border-radius: var(--standard-border-radius);
            background-color: var(--accent);
        }

        &::-moz-progress-bar {
            border-radius: var(--standard-border-radius);
            background-color: var(--accent);
            transition: width 0.3s;
        }

        &:indeterminate::-moz-progress-bar {
            background-color: var(--accent-bg);
        }
    }

    dialog {
        background-color: var(--bg);
        max-width: min(40rem, calc(100vw - 2rem));
        margin: auto;

        &::backdrop {
            background-color: oklch(from var(--bg) l c h / 0.8);
        }

        h2:first-of-type {
            margin-top: 0;
        }
    }

    sup,
    sub {
        vertical-align: baseline;
        position: relative;
    }

    sup {
        top: -0.4em;
    }

    sub {
        top: 0.3em;
    }

    /* Print */
    @media print {
        @page {
            margin: 1cm;
        }

        body {
            display: block;
        }

        body>header {
            background-color: unset;

            nav {
                display: none;
            }
        }

        body>footer {
            display: none;
        }

        article {
            border: none;
            padding: 0;
        }

        a {
            text-decoration: none;

            &[href^="http"]::after {
                content: " <" attr(href) ">";
            }
        }

        abbr[title]::after {
            content: " (" attr(title) ")";
        }

        p {
            widows: 3;
            orphans: 3;
        }

        hr {
            border-top: var(--border-width) solid var(--border);
        }

        mark {
            border: var(--border-width) solid var(--border);
        }

        figure {
            break-inside: avoid;
        }

        pre code {
            white-space: pre-wrap;
        }
    }
}