html {
    color-scheme: dark;
    font-family: sans-serif;
    background: oklch(0.23 0 0);
    accent-color: oklch(0.5 0.2 0);
}

.accent-form {
    margin-block: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.theme-form {
    max-width: 60rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;

    > fieldset {
        flex-basis: 28rem;
        flex-grow: 1;
    }
}

input[type="number"] {
    width: 7ch;
}

label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-basis: 40ch;
    flex-grow: 1;
}

.slider-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
    row-gap: 0.5rem;
}

.demo {
    margin-block: 3rem;
    max-width: 80ch;
    margin-inline: auto;
}

.demo-actions {
    margin-bottom: 0.5rem;

    button {
        all: unset;
        cursor: pointer;

        &:focus-visible {
            outline: 1px solid;
        }

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

.demo-areas {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 1rem;
}

[data-color-scheme="light"] {
    --surface-1: var(--surface-light-1);
    --surface-2: var(--surface-light-2);
    --surface-3: var(--surface-light-3);
    --weak-text: oklch(from var(--accent) 0.6 0.004 h);
    --body-text: oklch(from var(--accent) 0.4 0.01 h);
    --strong-text: oklch(from var(--accent) 0.25 0.01 h);
    --accent-hover: color-mix(in oklab, var(--accent), white 15%);
    --accent-active: color-mix(in oklab, var(--accent), black 15%);
    --accent-border: color-mix(in oklab, var(--accent), black 10%);
    --neutral: oklch(from var(--accent) 0.85 0.01 h);
    --neutral-hover: color-mix(in oklab, var(--neutral), black 10%);
    --neutral-active: color-mix(in oklab, var(--neutral), black 20%);
    --neutral-border: color-mix(in oklab, var(--neutral), black 10%);
    --neutral-shadow: oklch(
        from color-mix(in oklab, var(--neutral), black 50%) l c h / 0.5
    );
    --selection: oklch(
        from color-mix(in oklab, var(--accent), white 30%) l c h / 0.5
    );
}

[data-color-scheme="dark"] {
    --surface-1: var(--surface-dark-1);
    --surface-2: var(--surface-dark-2);
    --surface-3: var(--surface-dark-3);
    --weak-text: oklch(from var(--accent) 0.6 0.004 h);
    --body-text: oklch(from var(--accent) 0.85 0.01 h);
    --strong-text: oklch(from var(--accent) 0.95 0.01 h);
    --accent: color-mix(in oklab, var(--accent-border), black 10%);
    --accent-hover: color-mix(in oklab, var(--accent), white 15%);
    --accent-active: color-mix(in oklab, var(--accent), black 15%);
    --accent-border: color-mix(in oklab, var(--accent), white 10%);
    --neutral: oklch(from var(--accent) 0.4 0.01 h);
    --neutral-hover: color-mix(in oklab, var(--neutral), white 15%);
    --neutral-active: color-mix(in oklab, var(--neutral), black 15%);
    --neutral-border: color-mix(in oklab, var(--neutral), white 10%);
    --neutral-shadow: oklch(
        from color-mix(in oklab, var(--neutral), black 50%) l c h / 0.5
    );
    --selection: oklch(
        from color-mix(in oklab, var(--accent), white 30%) l c h / 0.5
    );
}

.demo-area {
    background: var(--surface-1);
    color: var(--body-text);
    border: 1px solid var(--neutral-border);
    border-radius: 5px;
    overflow: hidden;
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: auto 1fr;
    flex-basis: 30ch;
    flex-grow: 1;
    box-shadow: 0 0.25rem 2rem -0.25rem var(--neutral-shadow);

    > * {
        padding-inline: 0.5rem;
    }

    ::selection {
        background: var(--selection);
        color: var(--strong-text);
    }

    :focus-visible {
        outline: 3px solid var(--strong-text);
        outline-offset: 1px;
    }

    header {
        background: var(--surface-3);
        border-bottom: 1px solid var(--neutral-border);
        grid-area: header;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    aside {
        grid-area: sidebar;
        background: var(--surface-2);
        white-space: nowrap;
        border-right: 1px solid var(--neutral-border);
    }

    h2 {
        color: var(--strong-text);
        font-size: 1rem;
    }

    small {
        color: var(--weak-text);
    }

    fieldset {
        margin-block: 1rem;
        padding: 0;
        border: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    button,
    input {
        height: 2rem;
        box-sizing: border-box;
        padding-inline: 0.5rem;
        border: 1px solid var(--neutral-border);
        border-radius: 3px;
        color: var(--strong-text);
    }

    button {
        background: var(--neutral);

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

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

        &[data-variant="accent"] {
            background: var(--accent);
            border-color: var(--accent-border);
            color: var(--accent-contrast);

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

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

    ::placeholder {
        color: var(--weak-text);
    }

    input {
        background: var(--surface-2);
        color: var(--strong-text);
        width: 20ch;

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