:root {
    /* ===== TYPOGRAPHY ===== */
    --font-bold: 700;
    --font-display: "Play", serif;

    /* ===== BASE COLORS ===== */
    --clr-black: hsl(0deg 0% 0%);
    --clr-white: hsl(0deg 0% 100%);
    --clr-shadow: 0deg 0% 0%;

    /* ===== BRAND COLORS ===== */
    --clr-blue: hsl(212deg 28% 51%);
    --clr-blue-hover: hsl(250deg 38% 51%);
    --clr-blue-active: hsl(240deg 38% 51%);
    --clr-blue-visited: hsl(284deg 38% 51%);
    --clr-blue-light: hsl(212deg 38% 61%);
    --clr-blue-light-inverse: hsl(208deg 38% 51% / 10%);
    --clr-blue-dark: hsl(212deg 38% 41%);
    --clr-blue-dark-inverse: hsl(208deg 38% 51% / 20%);

    /* ===== NEUTRAL COLORS ===== */
    --clr-gray-lighter: hsl(0deg 0% 95%); /* 1.2:1 - subtle background */
    --clr-gray-light: hsl(0deg 0% 90%); /* 1.6:1 - elevated surfaces */
    --clr-gray-mid: hsl(0deg 0% 55%); /* 4.6:1 - accessible borders/text */
    --clr-gray-dark: hsl(0deg 0% 35%); /* 7.0:1 - high contrast text */

    /* ===== STATUS COLORS ===== */
    --clr-error: hsl(0deg 85% 50%); /* Improved contrast: 4.7:1 on white */
    --clr-success: hsl(120deg 60% 35%); /* Improved contrast: 4.8:1 on white */
    --clr-warning: hsl(45deg 100% 40%); /* Improved contrast: 4.6:1 on white */
    --clr-info: hsl(200deg 80% 40%); /* Improved contrast: 4.9:1 on white */

    /* ===== SEMANTIC COLORS ===== */
    /* Primary */
    --clr-primary: var(--clr-blue);
    --clr-primary-hover: var(--clr-blue-hover); /* Light blue for buttons */
    --clr-primary-visited: var(--clr-blue-visited);
    --clr-primary-light: var(--clr-blue-light);
    --clr-primary-light-inverse: var(--clr-blue-light-inverse);
    --clr-primary-dark: var(--clr-blue-dark);
    --clr-primary-dark-inverse: var(--clr-blue-dark-inverse);
    --clr-primary-active: var(--clr-blue-dark);

    /* Text colors */
    --clr-text-primary: var(--clr-black);
    --clr-text-secondary: var(--clr-gray-dark);
    --clr-text-muted: var(--clr-gray-mid);
    --clr-text-inverse: var(--clr-white);

    /* Background colors */
    --clr-bg-primary: var(--clr-white);
    --clr-bg-secondary: var(--clr-gray-lighter);
    --clr-bg-elevated: var(--clr-gray-light);
    --clr-bg-disabled: var(--clr-gray-mid);
    --clr-bg-inverse: var(--clr-black);

    /* Border colors */
    --clr-border-primary: var(--clr-gray-mid);
    --clr-border-secondary: var(--clr-gray-light);
    --clr-border-emphasis: var(--clr-primary);

    /* ===== COMPONENT COLORS ===== */
    /* Input Colors */
    --clr-input-text: var(--clr-text-primary);
    --clr-input-text-hover: var(--clr-primary-light);
    --clr-input-text-focused: var(--clr-primary);
    --clr-input-border: var(--clr-border-primary);
    --clr-input-border-hover: var(--clr-primary-light);
    --clr-input-border-focused: var(--clr-primary);
    --clr-input-bg-disabled: var(--clr-bg-elevated);
    --clr-input-error: var(--clr-error);

    /* Button colors */
    --clr-btn-text: var(--clr-text-inverse);
    --clr-btn-bg: var(--clr-primary);
    --clr-btn-bg-hover: var(--clr-primary-light);
    --clr-btn-bg-active: var(--clr-primary-dark);

    /* Filter button colors */
    --clr-filter-btn-bg: color-mix(in srgb, var(--clr-btn-bg) 70%, transparent);
    --clr-filter-btn-bg-selected: color-mix(
        in srgb,
        var(--clr-btn-bg) 30%,
        transparent
    );
    --clr-filter-btn-text-selected: var(--clr-black);

    /* Checkbox colors */
    --clr-checkbox-text: var(--clr-text-primary);
    --clr-checkbox-bg: var(--clr-bg-primary);
    --clr-checkbox-bg-hover: var(--clr-primary-light-inverse);
    --clr-checkbox-bg-active: var(--clr-primary-dark-inverse);
    --clr-checkbox-bg-checked: var(--clr-primary);
    --clr-checkbox-bg-checked-hover: var(--clr-primary-light);
    --clr-checkbox-bg-checked-active: var(--clr-primary-dark);
    --clr-checkbox-bg-disabled: var(--clr-bg-disabled);

    /* UI Component colors */
    --clr-exporter-menu-bg: var(--clr-bg-elevated);
    --clr-popup-menu-border: var(--clr-border-primary);
    --clr-card-border: var(--clr-border-secondary);
    --clr-card-line-accent: var(--clr-border-secondary);
    --clr-header-bg: var(--clr-primary);
    --clr-header-border: var(--clr-border-secondary);
    --clr-nav-bg: var(--clr-bg-inverse);
    --clr-nav-text: var(--clr-text-inverse);
    --clr-nav-text-hover: var(--clr-text-muted);

    /* ===== BORDERS ===== */
    --bdr-rounded: 0.75rem;
    --bdr-input: 2px solid var(--clr-input-border);
    --bdr-input-hover: 2px solid var(--clr-input-border-hover);
    --bdr-input-focused: 2px solid var(--clr-input-border-focused);
    --bdr-popup-menu: 1px solid var(--clr-popup-menu-border);
    --bdr-popup-menu-separator: 1px solid var(--clr-popup-menu-border);
    --bdr-card: 1px solid var(--clr-card-border);

    /* ===== SHADOWS ===== */
    --shadow-text: 0 1px 1.5px hsl(var(--clr-shadow) / 10%);
    --shadow-low:
        0 1px 1.5px hsl(var(--clr-shadow) / 10%), 0 2px 3px
        hsl(var(--clr-shadow) / 50%);
    --shadow-mid:
        0 1px 1.5px hsl(var(--clr-shadow) / 10%), 0 3.5px 5.25px
        hsl(var(--clr-shadow) / 60%);
    --shadow-high:
        0 1px 1.5px hsl(var(--clr-shadow) / 10%), 0 5px 7.5px
        hsl(var(--clr-shadow) / 70%);

    /* ===== MOTION ===== */
    --transition-easeinout-fast: all 0.1s ease-in-out;
    --transition-easeinout-mid: all 0.4s ease-in-out;
    --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media print {
    body {
        zoom: 67%;
    }
}

@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}

html {
    font-family: var(--font-display);
    color: var(--clr-black);
    text-shadow: var(--shadow-text);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 100vh;
    max-height: 100vh;
}

header {
    position: sticky;
    z-index: 50;
    top: 0;

    display: flex;
    gap: 0.25rem;
    align-items: center;

    width: 100%;

    color: var(--clr-white);

    background-color: var(--clr-black);

    & > .header-logo {
        padding: 1rem;
    }

    @media print {
        display: none;
    }
}

main {
    scrollbar-gutter: stable;

    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;

    width: 100%;

    & > div {
        contain: content;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 1rem;
        align-items: center;

        width: 100%;
        max-width: 80rem;
        padding: 0 1rem 1rem;
    }

    @media print {
        overflow-y: revert;
    }
}

footer {
    position: sticky;
    bottom: 0;

    width: 100%;
    padding: 0.25rem;

    font-size: small;
    color: var(--clr-white);
    text-align: center;

    background-color: var(--clr-black);

    & > a {
        text-decoration: underline;
    }

    @media (width >= 80rem) {
        font-size: large;
    }

    @media print {
        display: none;
    }
}

/* Atomic Classes */
.hidden {
    display: none;
}

.flex {
    display: flex;
}

.text-large {
    font-size: large;

    @media (width >= 80rem), print {
        font-size: x-large;
    }
}

.text-xlarge {
    font-size: x-large;

    @media (width >= 80rem), print {
        font-size: xx-large;
    }
}

.text-center {
    text-align: center;
}

.font-bold {
    font-weight: 700;
}

.width-half {
    width: 50%;
}

.width-full {
    width: 100%;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.grid-cols-one {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-two {
    grid-template-columns: repeat(1, minmax(0, 1fr));

    @media (width >= 80rem), print {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.grid-cols-three {
    grid-template-columns: repeat(1, minmax(0, 1fr));

    @media (width >= 80rem), print {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.grid-cols-four {
    grid-template-columns: repeat(1, minmax(0, 1fr));

    @media (width >= 80rem), print {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Common Simple Classes */

.popup-container {
    border: var(--bdr-popup-menu);
    border-radius: var(--bdr-rounded);

    list-style: none;

    background-color: var(--clr-gray-light);
    box-shadow: var(--shadow-mid);
}

.link {
    color: var(--clr-blue);

    &:visited {
        color: var(--clr-blue-visited);
    }

    &:hover {
        color: var(--clr-blue-hover);
        text-decoration: underline;
    }
}

.header-link {
    width: 100%;
    padding: 1rem 2rem;

    text-align: end;
    white-space: nowrap;

    transition: color 0.4s ease-in-out;

    &:hover {
        color: var(--clr-nav-text-hover);
    }

    &:focus {
        color: var(--clr-nav-text-hover);
        text-decoration: underline;
        outline: 2px solid var(--clr-nav-text);
        outline-offset: -1px;
    }

    @media (width >= 80rem), print {
        width: fit-content;
        padding: 1rem 1.5rem;
        border-radius: unset;
    }
}

/* @view-transition { */
/*     navigation: auto; */
/* } */