@import url("color-scheme-light.css") layer(theme) (scripting: none) and
        (prefers-color-scheme: light),
    (scripting: enabled);
@import url("color-scheme-dark.css") layer(theme) (scripting: none) and
        (prefers-color-scheme: dark),
    (scripting: enabled);

:root {
    --shadow-size: 0.0625rem 0.125rem 0.375rem -0.125rem;
    --border-radius: 3px;
}

::selection {
    background: var(--selection);
    color: var(--primary-contrast);
}

:focus-visible {
    outline: 2px solid var(--strong-text);
}

html {
    font-family: "Inter", sans-serif;
    background: var(--surface-1);
    color: var(--body-text);
    line-height: 1.625;
    accent-color: var(--primary);
}

#root {
    margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--strong-text);
    margin-top: 1.5em;
    margin-bottom: 1em;
}

a {
    color: var(--secondary-outline);
    cursor: pointer;
    font-weight: 500;
    text-decoration-thickness: 1px;
    text-decoration-color: oklch(from var(--secondary-outline) l c h / 0.5);

    &:hover {
        text-decoration-color: var(--secondary-outline);
    }

    &:active {
        opacity: 0.75;
    }

    &:visited {
        color: var(--primary-outline);
        text-decoration-color: var(--primary-outline);

        &:hover {
            text-decoration-color: var(--primary-outline);
        }

        &:active {
            opacity: 0.75;
        }
    }
}

button,
input,
select,
textarea {
    /* border-radius: var(--border-radius); */
    font-weight: 500;
    border: 1px solid oklch(from var(--neutral-outline) l c h / 0.5);
    box-shadow: var(--shadow-size) var(--neutral-shadow);
    font-family: inherit;
    font-size: inherit;
    box-sizing: border-box;
    padding: 0.5rem;
}

button {
    background: var(--neutral);
    color: var(--neutral-contrast);
    user-select: none;

    &:hover {
        background: var(--neutral-hover);
    }

    &:active {
        background: var(--neutral-active);
    }

    &[data-color="primary"] {
        background: var(--primary);
        color: var(--primary-contrast);
        border-color: oklch(from var(--primary-outline) l c h / 0.5);
        box-shadow: var(--shadow-size) var(--primary-shadow);

        &:hover {
            background: var(--primary-hover);
        }

        &:active {
            background: var(--primary-active);
        }
    }

    &[data-color="secondary"] {
        background: var(--secondary);
        color: var(--secondary-contrast);
        border-color: oklch(from var(--secondary-outline) l c h / 0.5);
        box-shadow: var(--shadow-size) var(--secondary-shadow);

        &:hover {
            background: var(--secondary-hover);
        }

        &:active {
            background: var(--secondary-active);
        }
    }

    &[data-color="transparent"] {
        --a: 0;
        background: oklch(from var(--body-text) l c h / var(--a));
        color: var(--strong-text);
        border-color: transparent;
        box-shadow: none;

        &:hover {
            --a: 0.15;
        }

        &:active {
            --a: 0.35;
        }
    }
}

input,
textarea {
    background: var(--surface-2);
    color: var(--strong-text);

    &::placeholder {
        color: var(--neutral-outline);
        opacity: 1;
    }

    &:not(:disabled) {
        &:hover {
            background: var(--surface-3);
        }
    }
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"] {
    color: var(--primary-contrast);
    height: 1.5em;
    width: 1.5em;

    &::before {
        content: "\2713";
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        place-items: center;
        font-weight: 700;
    }

    &:checked::before {
        opacity: 1;
    }

    &:hover {
        background: var(--neutral-hover);
    }

    &:active {
        background: var(--neutral-active);
    }

    &:checked {
        background: var(--primary);
        border-color: oklch(from var(--primary-outline) l c h / 0.4);
        box-shadow: var(--shadow-size) var(--primary-shadow);

        &:not(:disabled) {
            &:hover {
                background: var(--primary-hover);
            }

            &:active {
                background: var(--primary-active);
            }
        }
    }

    &[data-color="secondary"]:checked {
        background: var(--secondary);
        border-color: oklch(from var(--secondary-outline) l c h / 0.4);
        box-shadow: var(--shadow-size) var(--secondary-shadow);
        color: var(--secondary-contrast);

        &:not(:disabled) {
            &:hover {
                background: var(--secondary-hover);
            }

            &:active {
                background: var(--secondary-active);
            }
        }
    }
}

input[type="radio"] {
    position: relative;
    border-radius: 9999px;
    height: 1.25em;
    width: 1.25em;

    &:hover {
        background: var(--neutral-hover);
    }

    &:active {
        background: var(--neutral-active);
    }

    &::before {
        content: "";
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        right: 0.25rem;
        bottom: 0.25rem;
        border-radius: 9999px;
    }

    &:checked {
        border-color: var(--primary-outline);

        &::before {
            background: var(--primary-outline);
        }
    }

    &[data-color="secondary"] {
        &:checked {
            border-color: var(--secondary-outline);

            &::before {
                background: var(--secondary-outline);
            }
        }
    }
}

select {
    background: var(--neutral);
    box-shadow: var(--shadow-size) var(--neutral-shadow);
    color: var(--neutral-contrast);

    &:hover {
        background: var(--neutral-hover);
    }

    &:active {
        background: var(--neutral-active);
    }
}

label {
    font-weight: 500;
    user-select: none;
}

header[role="banner"] {
    background: var(--primary);
    box-shadow: var(--shadow-size) var(--primary-shadow);
    position: sticky;
    top: 0;
    z-index: 1;

    :first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    a {
        color: var(--primary-contrast);
        text-decoration: none;

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

    nav {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    select {
        padding-block: 1rem;

        &[data-color="transparent"] {
            background: var(--primary);
            color: var(--primary-contrast);
            border-color: transparent;
            box-shadow: none;

            &:hover {
                background: var(--primary-hover);
            }

            &:active {
                background: var(--primary-active);
            }
        }
    }
}

.surface-1,
.surface-2,
.surface-3 {
    padding: 1rem;
}

.surface-1 {
    background: var(--surface-1);
}

.surface-2 {
    background: var(--surface-2);
}

.surface-3 {
    background: var(--surface-3);
}