@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%);
    --black: hsl(0, 0%, 27%);
    --yellow-desaturated: hsl(60, 64%, 98%);

    --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(--color-4);

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

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

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

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

* {
    font-family: 'Inter', sans-serif;
    font-synthesis: none;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }
fieldset { border: 0; }

body {
    margin: 0;
    padding: 0;
    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)); }
    > 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;
    text-transform: uppercase;
}

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

button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

ul, ol, li, menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

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