:root {
    --color-1: hsl(186, 100%, 34%);
    --color-1-desaturated: hsl(186, 50%, 97%);
    --color-2: hsl(334, 90%, 50%);
    --color-3: yellowgreen;
    --color-4: hsl(38, 96%, 55%);

    --red-alert: hsl(358, 74%, 45%);
    --green-legacy: hsl(65, 71%, 51%);
    --blue-legacy: hsl(195, 100%, 45%);
    --green: hsl(120, 39%, 54%);
    --red: hsl(2, 64%, 58%);
    --gray: hsl(244, 7%, 40%);
    --grey-dark: hsl(0, 0%, 20%);

    --success-green: hsl(140, 60%, 40%);
    --error-red: hsl(0, 100%, 40%);
    --info-blue: hsl(219, 100%, 66%);
    --warning-orange: hsl(22, 100%, 50%);

    --color-flash-success-background: var(--success-green);
    --color-flash-error-background: var(--error-red);
    --color-flash-warning-background: var(--warning-orange);
    --color-flash-info-background: var(--info-blue);

    --responsive-trigger-size: 70em;

    --flashs-height: 3em;
    --header-height: 5em;
    --header-background: white;
    --footer-height: 3em;
    --footer-background: black;

    --color-edit-button: var(--color-4);
    --color-delete-button: var(--color-flash-error-background);
}

.color-cyan { color: var(--color-1); }
.color-pink { color: var(--color-2); }
.color-green { color: var(--color-3); }
.color-orange { color: var(--color-4); }

* {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    list-style-type: none;
    scroll-behavior: smooth;
    scrollbar-color: var(--color-1) rgba(0, 0, 0, 0);

    &::-webkit-scrollbar { width: 1em; }
    &::-webkit-scrollbar-track { color: var(--color-1-desaturated); }
    &::-webkit-scrollbar-thumb {
        background-color: var(--color-1);
        border-radius: 2px;
    }
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100dvh;
    background-color: var(--color-1-desaturated);
    font-family: 'Open Sans', sans-serif;
    display: grid;

    > header {
        height: var(--header-height);
        background-color: var(--header-background);
    }

    > header, > footer {
        padding: 0 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    @media screen and (min-width: 50rem) {
        display: grid;
        grid-template-rows: var(--header-height) 1fr var(--footer-height);
    }
}

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

    &:not([href]) {
        color: whitesmoke;
        cursor: pointer;
    }
}

button {
    display: block;
    border: none;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}

fieldset {
    border: 1px solid var(--outline-color);
    border-radius: 0.5rem;
    padding: 1.5em;
    display: grid;
    gap: 1rem;

    legend {
        padding: 0 0.25rem;
        color: var(--outline-color);
    }

    > div, > div > div {
        display: grid;
        gap: 0.5rem;
    }

    input:focus-visible { outline: auto; }
    input:user-valid:required { outline: 2px solid var(--color-3); }
    input:user-invalid:required { outline: 2px solid var(--red-alert); }
}

input::not([type=radio]), select, textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: white;
    color: black;
    border: 1px solid gainsboro;
    font-size: 1rem;
    font-family: inherit;

    &:hover:not([disabled]) { cursor: pointer; }
    &:placeholder-shown {
        color: var(--gray);
        font-weight: bolder;
        font-style: italic;
        text-overflow: ellipsis;
    }
}

select, ::picker(select) { appearance: base-select; }

.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 0 !important;
    width: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
}