/* DIY Base CSS for Stellar
 * Adapted from OpenProps normalize.css
 * Uses Stellar CSS variables instead of OpenProps
 * Applied via @layer base for opinionated default styles
 */

@layer base {
    /* ============================================
    * Local content-width variables (scoped to base)
    * ============================================ */
    :where(html) {
        --_content-1: 20rem;
        --_content-2: 35rem;
        --_content-3: 50rem;
        --_header-1: 20ch;
        --_header-2: 25ch;
        --_header-3: 35ch;
    }

    /* ============================================
    * Document / Root
    * ============================================ */
    :where(html) {
        -webkit-text-size-adjust: none;
        accent-color: var(--primary-6);
        background-color: var(--neutral-1);
        block-size: 100%;
        caret-color: var(--primary-6);
        color: var(--neutral-1-on);
        color-scheme: light dark;
        font-family: var(--font-sans);
        line-height: var(--font-line-height-1);
        scrollbar-color: var(--neutral-7) transparent;
    }

    :where(body) {
        min-block-size: 100%;
    }

    /* ============================================
    * Smooth scrolling (respects reduced motion)
    * ============================================ */
    @media (prefers-reduced-motion: no-preference) {
        :where(html) {
            scroll-behavior: smooth;
        }
    }

    /* ============================================
    * Focus states
    * ============================================ */
    :focus-visible {
        outline: 1px solid var(--primary-6);
        outline-offset: 1px;
    }

    /* ============================================
    * Flow content spacing (vertical rhythm)
    * ============================================ */
    :where(
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        ul,
        ol,
        dl,
        blockquote,
        pre,
        figure,
        table,
        fieldset,
        hr
    ) {
        margin-block: var(--size-3);
    }

    :where(h1, h2, h3, h4, h5, h6) {
        margin-block-start: var(--size-5);
        margin-block-end: var(--size-2);
    }

    :where(:first-child) {
        margin-block-start: 0;
    }

    :where(:last-child) {
        margin-block-end: 0;
    }

    /* ============================================
    * Typography - Headings
    * ============================================ */
    :where(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance;
        font-weight: var(--font-weight-black);
        line-height: 1.1;
    }

    :where(h1) {
        font-size: var(--font-size-8);
        max-inline-size: var(--_header-1);
    }

    :where(h2) {
        font-size: var(--font-size-6);
        max-inline-size: var(--_header-2);
    }

    :where(h3) {
        font-size: var(--font-size-5);
    }

    :where(h4) {
        font-size: var(--font-size-4);
    }

    :where(h5) {
        font-size: var(--font-size-3);
    }

    :where(h3, h4, h5, h6, dt) {
        max-inline-size: var(--_header-3);
    }

    /* ============================================
    * Typography - Body text
    * ============================================ */
    :where(p, ul, ol, dl, h6) {
        font-size: var(--font-size-2);
    }

    :where(p) {
        text-wrap: pretty;
        max-inline-size: var(--_content-3);
    }

    :where(small) {
        font-size: max(0.5em, var(--font-size-0));
        max-inline-size: var(--_content-1);
    }

    :where(dt, summary) {
        font-weight: var(--font-weight-bold);
    }

    :where(dt:not(:first-of-type)) {
        margin-block-start: var(--size-4);
    }

    /* ============================================
    * Links
    * ============================================ */
    :where(a[href]) {
        color: var(--primary-6);
        text-decoration: none;
    }

    :where(a[href]):where(:visited) {
        color: var(--primary-8);
    }

    :where(a, u, ins, abbr) {
        text-underline-offset: 1px;
    }

    @supports (-moz-appearance: none) {
        :where(a, u, ins, abbr) {
            text-underline-offset: 2px;
        }
    }

    /* ============================================
    * SVG sizing
    * ============================================ */
    :where(svg:not([width])) {
        inline-size: var(--size-6);
    }

    /* ============================================
    * Forms
    * ============================================ */
    :where(input, button, textarea, select),
    :where(input[type="file"])::-webkit-file-upload-button {
        color: inherit;
        font: inherit;
        font-size: inherit;
        letter-spacing: inherit;
    }

    ::placeholder {
        color: var(--neutral-7);
        opacity: 0.75;
    }

    :where(input:not([type="range"]), textarea) {
        padding-block: var(--size-0);
        padding-inline: var(--size-1);
    }

    :where(select) {
        field-sizing: content;
        padding-block: var(--size-0);
        padding-inline: var(--size-2) 0;
    }

    :where(
        textarea,
        select,
        input:not([type="button"], [type="submit"], [type="reset"])
    ) {
        background-color: var(--neutral-2);
        border-radius: var(--border-radius-2);
    }

    :where(textarea) {
        field-sizing: content;
        min-block-size: 2lh;
        min-inline-size: var(--_content-1);
        resize: vertical;
    }

    :where(input[type="checkbox"], input[type="radio"]) {
        block-size: var(--size-2);
        inline-size: var(--size-2);
    }

    :where(fieldset) {
        border: var(--border-width-1) solid var(--neutral-4);
        border-radius: var(--border-radius-2);
    }

    /* ============================================
    * Code / Pre / Kbd
    * ============================================ */
    :where(code, kbd, samp, pre) {
        font-family: var(--font-mono);
    }

    :where(:not(pre) > code, kbd) {
        white-space: nowrap;
    }

    :where(pre) {
        direction: ltr;
        max-inline-size: max-content;
        min-inline-size: 0;
        white-space: pre;
        writing-mode: lr;
    }

    :where(:not(pre) > code) {
        background: var(--neutral-2);
        border-radius: var(--border-radius-2);
        padding: var(--size-0) var(--size-1);
        writing-mode: lr;
    }

    :where(kbd, var) {
        border-color: var(--neutral-4);
        border-radius: var(--border-radius-2);
        border-width: var(--border-width-1);
        padding: var(--size-0) var(--size-1);
    }

    :where(mark) {
        border-radius: var(--border-radius-2);
        padding-inline: var(--size-0);
    }

    /* ============================================
    * Lists
    * ============================================ */
    :where(ol, ul) {
        padding-inline-start: var(--size-6);
    }

    :where(li) {
        padding-inline-start: var(--size-1);
    }

    :where(li, dd, figcaption) {
        max-inline-size: var(--_content-2);
    }

    :where(menu) {
        display: flex;
        gap: var(--size-2);
        padding-inline-start: 0;
    }

    /* ============================================
    * Horizontal rule
    * ============================================ */
    :where(hr) {
        background-color: var(--neutral-3);
        height: var(--border-width-2);
        margin-block: var(--size-5);
    }

    /* ============================================
    * Figures
    * ============================================ */
    :where(figure) {
        display: grid;
        gap: var(--size-1);
        place-items: center;
    }

    :where(figure) > :where(figcaption) {
        text-wrap: balance;
        font-size: var(--font-size-1);
    }

    /* ============================================
    * Blockquote / Cite
    * ============================================ */
    :where(blockquote, :not(blockquote) > cite) {
        border-inline-start-width: var(--border-width-3);
    }

    :where(blockquote) {
        display: grid;
        gap: var(--size-2);
        max-inline-size: var(--_content-2);
        padding-block: var(--size-2);
        padding-inline: var(--size-3);
    }

    :where(:not(blockquote) > cite) {
        padding-inline-start: var(--size-1);
    }

    /* ============================================
    * Details / Summary
    * ============================================ */
    :where(summary) {
        background: var(--neutral-3);
        border-radius: var(--border-radius-2);
        margin: calc(var(--size-1) * -1) calc(var(--size-2) * -1);
        padding: var(--size-1) var(--size-2);
    }

    :where(details) {
        background: var(--neutral-2);
        border-radius: var(--border-radius-2);
        padding-block: var(--size-1);
        padding-inline: var(--size-2);
    }

    :where(details[open] > summary) {
        border-end-end-radius: 0;
        border-end-start-radius: 0;
        margin-bottom: var(--size-1);
    }

    /* ============================================
    * Deleted / Inserted text
    * ============================================ */
    :where(del) {
        background: var(--error-9);
        color: var(--error-2);
    }

    :where(ins) {
        background: var(--primary-9);
        color: var(--primary-1);
    }

    /* ============================================
 * Abbreviations
 * ============================================ */
    :where(abbr) {
        text-decoration-color: var(--tertiary-5);
    }

    /* ============================================
    * Dialog
    * ============================================ */
    :where(dialog) {
        background-color: var(--neutral-1);
        border-radius: var(--border-radius-3);
        box-shadow: var(--shadow-6);
        color: inherit;
    }

    /* ============================================
 * Superscript
 * ============================================ */
    :where(sup) {
        font-size: 0.5em;
    }

    /* ============================================
    * Tables
    * ============================================ */
    :where(table) {
        --_nice-inner-radius: calc(var(--border-radius-3) - 2px);
        background: var(--neutral-2);
        border: var(--border-width-0) solid var(--neutral-2);
        border-radius: var(--border-radius-3);
        width: fit-content;
    }

    :where(table:not(:has(tfoot)) tr:last-child td:first-child) {
        border-end-start-radius: var(--_nice-inner-radius);
    }

    :where(table:not(:has(tfoot)) tr:last-child td:last-child) {
        border-end-end-radius: var(--_nice-inner-radius);
    }

    :where(table thead tr:first-child th:first-child) {
        border-start-start-radius: var(--_nice-inner-radius);
    }

    :where(table thead tr:first-child th:last-child) {
        border-start-end-radius: var(--_nice-inner-radius);
    }

    :where(tfoot tr:last-child th:first-of-type) {
        border-end-start-radius: var(--_nice-inner-radius);
    }

    :where(tfoot tr:last-child td:first-of-type) {
        border-end-start-radius: var(--_nice-inner-radius);
    }

    :where(tfoot tr:last-child th:last-of-type) {
        border-end-end-radius: var(--_nice-inner-radius);
    }

    :where(tfoot tr:last-child td:last-of-type) {
        border-end-end-radius: var(--_nice-inner-radius);
    }

    :where(th) {
        background-color: var(--neutral-2);
        color: var(--neutral-1-on);
    }

    :where(table a:not(.does-not-exist):focus-visible) {
        outline-offset: -2px;
    }

    :where(table button:not(.does-not-exist):focus-visible) {
        outline-offset: -2px;
    }

    :where(table [contenteditable]:focus-visible) {
        outline-offset: -2px;
    }

    :where(td) {
        text-wrap: pretty;
        background: var(--neutral-1);
        max-inline-size: var(--_content-2);
    }

    :where(td, th) {
        padding: var(--size-1);
        text-align: left;
    }

    :where(td:not([align])) {
        text-align: center;
    }

    :where(th:not([align])) {
        text-align: center;
    }

    :where(thead) {
        border-collapse: collapse;
    }

    :where(table tr:hover td),
    :where(tbody tr:nth-child(2n):hover td) {
        background-color: var(--neutral-3);
    }

    :where(table > caption) {
        margin: var(--size-2);
    }

    :where(tfoot button) {
        padding-block: var(--size-0);
        padding-inline: var(--size-2);
    }

    /* ============================================
    * Dark mode overrides
    * ============================================ */
    @media (prefers-color-scheme: dark) {
        :where(
            textarea,
            select,
            input:not([type="button"], [type="submit"], [type="reset"])
        ) {
            background-color: var(--neutral-8);
        }

        :where(dialog) {
            background-color: var(--neutral-2);
        }

        ::placeholder {
            color: var(--neutral-6);
        }
    }

    /* Forced dark mode overrides (when OS is light but user picks dark) */
    :where(html[data-theme="dark"]) {
        color-scheme: dark;

        & :where(
            textarea,
            select,
            input:not([type="button"], [type="submit"], [type="reset"])
        ) {
            background-color: var(--neutral-8);
        }

        & :where(dialog) {
            background-color: var(--neutral-2);
        }

        & ::placeholder {
            color: var(--neutral-6);
        }
    }

    /* Forced light mode override (when OS is dark but user picks light) */
    :where(html[data-theme="light"]) {
        color-scheme: light;

        & :where(
            textarea,
            select,
            input:not([type="button"], [type="submit"], [type="reset"])
        ) {
            background-color: var(--neutral-2);
        }

        & :where(dialog) {
            background-color: var(--neutral-1);
        }

        & ::placeholder {
            color: var(--neutral-7);
            opacity: 0.75;
        }
    }
} /* @layer base */