@layer defaults {

    html {
        color-scheme: dark light;
        background-color: var(--bg);
        display: grid;
    }

    html:not(:has(.online)) {
        overscroll-behavior: contain;
    }

    html,
    body {
        min-height: 100vh;
    }

    body {
        display: grid;
        font-family: var(--font);
        color: var(--fg);
    }

    header {
        background-color: var(--brand-dark);
        color: var(--white);
        padding: var(--spacing-xl);
    }

    nav {
        background-color: transparent;
    }

    footer {
        border-block-start: 1px solid var(--bg-2);
        background-color: var(--bg);
        padding: var(--spacing-lg);
    }

    :where(h1,
        h2,
        h3,
        h4,
        h5,
        h6) {
        &:not(:has(+ .subtitle)) {
            margin-block-start: var(--spacing-sm);
            margin-block-end: var(--spacing-lg);
        }

        text-align: center;
    }

    h1 {
        font-size: var(--font-xxl);
    }

    .subtitle {
        font-size: var(--font-base);
        font-style: italic;
        color: var(--brand-light);
        text-align: center;
        margin-block-end: var(--spacing-lg);
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    button,
    a.button {
        outline: none;
        border: none;
        background-color: transparent;

        &:not(.icon-button) {
            background-color: var(--bg-1);
        }

        &.primary {
            background-color: var(--brand-dark);
            color: var(--white);
        }

        &:disabled {
            background-color: var(--bg-2);
            cursor: not-allowed;
        }

        color: var(--fg-2);
        padding: var(--spacing-base);
        border-radius: var(--rounding);
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--animation-time-s) ease-in-out,
        color var(--animation-time-s) ease-in-out;

        &.icon-button {
            border: none;
            outline: none;
            cursor: pointer;
            padding: var(--spacing-base);
            display: grid;
            gap: var(--spacing-sm);
            justify-items: center;

            &>span {
                font-size: var(--font-s);
            }
        }

        &:not(.icon-button) {
            font-weight: bold;

            &:hover:not(:disabled) {
                background-color: oklch(from var(--brand-light) calc(l * 0.9) c h);
            }
        }

        &:hover:not(:disabled) {
            color: var(--brand-light);
        }
    }

    input[type=text],
    input[type=number],
    textarea,
    input[type=password],
    input[type=date],
    input[type=email] {
        outline: none;
        background-color: var(--bg-1);
        transition: outline 125ms ease-in-out;
        padding: var(--spacing-base);
        border-radius: var(--rounding);
        --border-color: var(--bg-2);
        border: 1px solid var(--border-color);

        &:focus {
            outline: 3px solid var(--brand-light);
        }

        &[aria-invalid=true] {
            --border-color: var(--color-red);
        }
    }

    form {
        padding: var(--spacing-base);
        accent-color: light-dark(var(--brand-dark), var(--brand-light));
        display: grid;

        input:not(:last-child) {
            margin-block-end: var(--spacing-lg);
        }

        label {
            font-weight: bold;
            margin-block-end: var(--spacing-base);
        }

        label:has(+ input[required])::after {
            content: ' *';
        }

        label:has(+ input[aria-invalid=true]) {
            color: var(--color-red);
        }

        input::placeholder {
            font-style: italic;
        }

        .validation-errors:last-child {
            margin-block-start: var(--spacing-lg);
        }

        input[type=file] {}

        label+input[type=file] {
            display: none;
        }

        label:has(+ input[type=file]) {
            display: grid;
            grid-template-columns: auto 1fr;
            cursor: pointer;
            align-items: center;
            gap: var(--spacing-xl);
        }

        input[type=file]::file-selector-button,
        label:has(+ input[type=file]) {
            cursor: pointer;
            background-color: var(--bg-1);
            padding: var(--spacing-lg);
            border: none;
            border-radius: var(--rounding);
        }
    }


    svg {
        width: 1em;
        height: 1em;
        line-height: 1em;

        path {
            fill: currentColor;
        }
    }

    img[src=""],
    img:not([src]) {
        border: 2px solid var(--color-red);
    }

}