@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Inter:wght@400;500;700&display=swap');

:root {
    --color-1: hsl(188 57% 44%);
    --color-1-desaturated: hsl(188 15% 44%);
    --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%);
    --green: hsl(120 39% 54%);
    --red: hsl(2 64% 58%);
    --gray: hsl(244 7% 40%);
    --grey-dark: hsl(0 0% 20%);
    --yellow-desaturated: hsl(60, 86%, 97%);

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

    --required-indicator-color: var(--red-alert);

    --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);

    --flashs-height: 3rem;
    --header-height: 4rem;
    --footer-height: 4rem;
    --footer-background: black;

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

    --transition-duration: 300ms;
    --transition-timing: ease;

    --popover-backdrop-color: hsl(0 0% 0% / 0.5);
    --facet-bg-mobile: hsl(210 17% 98%);
    --facet-shadow: 0.125rem 0 0.625rem hsl(0 0% 0% / 0.1);

    --color-focus: var(--color-1-desaturated);
    --focus-outline-width: 3px;
    --focus-outline-offset: 3px;
}

.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: 'Inter', sans-serif;
    font-synthesis: none;
    box-sizing: border-box;
    list-style-type: none;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: 'Inter', sans-serif;
    display: grid;
    grid-template-rows: var(--header-height) 1fr var(--footer-height);

    > header { height: var(--header-height); }
    > main {
        min-height: calc(100dvh - var(--header-height));
        max-width: 90dvw;
        margin: auto;
    }
    > footer { height: var(--footer-height); }

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

h1, h2, h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

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

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

button {
    display: inline-grid;
    border: none;
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
}

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;
    }
}

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;
}