:root {
    --animation-duration: 100ms;

    --spacing-lg: 2.5rem;
    --spacing-md: 1rem;
    --spacing-sm: 0.5rem;

    --radius-sm: 4px;
    --radius-lg: 15px;

    --primary: #684F95;
    --primary-light: color-mix(in srgb, var(--primary), white 75%);
    --primary-hover: #8874AC;

    --secondary: #F2F2F2;

    --danger: #C200031A;
    --on-danger: #C20003;

    --border-color: rgba(0, 0, 0, 0.15);
    --border-radius: 8px;

    --status-perfect: #A6D6B2;
    --on-status-perfect: #245B32;
    --status-good: #CBE0A9;
    --on-status-good: #4C6228;
    --status-warn: #F4C8A8;
    --on-status-warn: #7B4B29;
    --status-bad: #F3B7B7;
    --on-status-bad: #823636;

    --surface-subtle: #FEFDFF;

    --text-color: black;
    --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.08);

    --highlight: rgba(0, 0, 0, 0.07);

    font-size: 14px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--surface-subtle);
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100dvh;
    padding: var(--spacing-lg);
}

main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);

    .site-logo {
        align-self: end;
    }
}

button,
.btn {
    --background-color: var(--secondary);
    background-color: var(--background-color);
    color: black;
    display: inline-block;

    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-weight: 600;
    border: 1px solid var(--border-color);

    &:hover {
        background-color: color-mix(in srgb, var(--background-color), black 20%);
    }

    &:active {
        background-color: color-mix(in srgb, var(--background-color), black 30%);
    }


    &.circle {
        align-items: center;
        aspect-ratio: 1;
        display: inline-flex;
        justify-content: center;
        padding: 0.5rem;
    }

    &.primary {
        --background-color: var(--primary);
        border: 1px solid transparent;
        color: white;

        &:hover {
            --background-color: var(--primary-hover);
        }
    }

    &.tertiary {
        color: rgb(from var(--text-color) r g b / 0.7);
        background-color: white;
    }

    &.transparent {
        border: none;
        background-color: transparent;
        color: rgb(from var(--text-color) r g b / 0.7);

        &.circle:hover {
            background: rgba(0, 0, 0, 0.07);
        }
    }
}

form .form-rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

fieldset {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

label:has(input, select) {
    transition: background-color 50ms linear;

    background-color: var(--secondary);
    border-radius: var(--border-radius);
    color: rgba(0, 0, 0, 0.5);
    display: grid;
    font-size: 0.75rem;
    grid-template-columns: 1fr auto;
    padding: 0.5rem 1rem;

    &:focus-within {
        background-color: var(--primary-light);
        outline: 1px solid var(--primary);
    }

    input, select {
        display: block;
        background-color: transparent;
        border: none;
        grid-column: 1;
        outline: none;
        font-size: 1rem;
        padding: 1px 2px;
    }

    &:has(input[type=checkbox], input[type=radio]) {
        gap: var(--spacing-sm);
        grid-template-columns: auto 1fr auto;
        padding: var(--spacing-md);

        span {
            grid-column: 2;
            grid-row: 1;
        }

        input {
            margin: auto;
        }
    }

    .error-list {
        padding: 0;
        list-style-type: none;
        color: var(--danger);
    }

    .suffix {
        display: flex;
        grid-row: 1/3;
        grid-column: 2;
    }
}

.error-list {
    background-color: var(--danger);
    border-radius: var(--border-radius);
    color: var(--on-danger);
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: var(--spacing-sm);
    list-style-type: none;
    padding: var(--spacing-md);
    margin-bottom: 0;

    &:first-child {
        margin-top: 0;
    }

    &:not(:first-child) {
        margin-top: var(--spacing-md);
    }

    li {
        align-items: center;
        display: flex;
        gap: 8px;
    }
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.gap-lg {
    gap: var(--spacing-lg);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.rounded-tl-sm {
    border-top-left-radius: var(--radius-sm);
}

.rounded-tr-sm {
    border-top-right-radius: var(--radius-sm);
}

.rounded-bl-sm {
    border-bottom-left-radius: var(--radius-sm);
}

.rounded-br-sm {
    border-bottom-right-radius: var(--radius-sm);
}

.icon {
    height: 32px;
    width: 32px;
    display: grid;
    place-items: center;

    &.star {
        background-size: cover;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjQwMzUgMS4xNzk5M0MxMy4xOTQxIDAuMTAwNDE3IDE0LjgwNTkgMC4xMDA0MTcgMTUuNTk2NSAxLjE3OTkzQzE2LjE3ODIgMS45NzQyMiAxNy4yNTUzIDIuMjIwMDcgMTguMTI0IDEuNzU2ODNDMTkuMzA0NyAxLjEyNzI1IDIwLjc1NjkgMS44MjY1NyAyMS4wMDA4IDMuMTQyMkMyMS4xODAzIDQuMTEwMjMgMjIuMDQ0MSA0Ljc5OTA4IDIzLjAyNzcgNC43NTg2NEMyNC4zNjQ3IDQuNzAzNjggMjUuMzY5NiA1Ljk2MzgyIDI1LjAxODUgNy4yNTVDMjQuNzYwMiA4LjIwNTAyIDI1LjIzOTYgOS4yMDA0NSAyNi4xNDM0IDkuNTkwODJDMjcuMzcxOCAxMC4xMjE0IDI3LjczMDQgMTEuNjkyNyAyNi44NTM5IDEyLjcwMzdDMjYuMjA5IDEzLjQ0NzYgMjYuMjA5IDE0LjU1MjQgMjYuODUzOSAxNS4yOTYzQzI3LjczMDQgMTYuMzA3MyAyNy4zNzE4IDE3Ljg3ODYgMjYuMTQzNCAxOC40MDkyQzI1LjIzOTYgMTguNzk5NiAyNC43NjAyIDE5Ljc5NSAyNS4wMTg1IDIwLjc0NUMyNS4zNjk2IDIyLjAzNjIgMjQuMzY0NyAyMy4yOTYzIDIzLjAyNzcgMjMuMjQxNEMyMi4wNDQxIDIzLjIwMDkgMjEuMTgwMyAyMy44ODk4IDIxLjAwMDggMjQuODU3OEMyMC43NTY5IDI2LjE3MzQgMTkuMzA0NyAyNi44NzI4IDE4LjEyNCAyNi4yNDMyQzE3LjI1NTMgMjUuNzc5OSAxNi4xNzgyIDI2LjAyNTggMTUuNTk2NSAyNi44MjAxQzE0LjgwNTkgMjcuODk5NiAxMy4xOTQxIDI3Ljg5OTYgMTIuNDAzNSAyNi44MjAxQzExLjgyMTggMjYuMDI1OCAxMC43NDQ3IDI1Ljc3OTkgOS44NzU5NiAyNi4yNDMyQzguNjk1MjggMjYuODcyOCA3LjI0MzExIDI2LjE3MzQgNi45OTkyMSAyNC44NTc4QzYuODE5NzQgMjMuODg5OCA1Ljk1NTk0IDIzLjIwMDkgNC45NzIyNiAyMy4yNDE0QzMuNjM1MzMgMjMuMjk2MyAyLjYzMDQgMjIuMDM2MiAyLjk4MTQ4IDIwLjc0NUMzLjIzOTggMTkuNzk1IDIuNzYwNDIgMTguNzk5NiAxLjg1NjYxIDE4LjQwOTJDMC42MjgyMzcgMTcuODc4NiAwLjI2OTU4MSAxNi4zMDczIDEuMTQ2MTEgMTUuMjk2M0MxLjc5MTA0IDE0LjU1MjQgMS43OTEwNCAxMy40NDc2IDEuMTQ2MTEgMTIuNzAzN0MwLjI2OTU4MSAxMS42OTI3IDAuNjI4MjM3IDEwLjEyMTQgMS44NTY2MSA5LjU5MDgyQzIuNzYwNDIgOS4yMDA0NSAzLjIzOTggOC4yMDUwMiAyLjk4MTQ4IDcuMjU1QzIuNjMwNCA1Ljk2MzgyIDMuNjM1MzMgNC43MDM2OCA0Ljk3MjI2IDQuNzU4NjRDNS45NTU5NCA0Ljc5OTA4IDYuODE5NzQgNC4xMTAyMyA2Ljk5OTIxIDMuMTQyMkM3LjI0MzExIDEuODI2NTcgOC42OTUyOCAxLjEyNzI1IDkuODc1OTYgMS43NTY4M0MxMC43NDQ3IDIuMjIwMDcgMTEuODIxOCAxLjk3NDIyIDEyLjQwMzUgMS4xNzk5M1oiIGZpbGw9IiNEQzUyNTIiLz4KPC9zdmc+Cg==);
        color: white;
    }
}