@import url("/colors.css");

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    background: var(--c-bg);
    color: var(--c-text);
}

.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background: var(--c-primary);
    color: var(--c-bg);
    border: 1px solid color-mix(in srgb, var(--c-primary) 80%, black 20%)
        var(--c-primary);
    padding: 0.5ch 1em;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.button,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background: var(--c-primary-alt);
    border-color: var(--c-primary-alt);
}

.button,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
    transform: translateY(1px);
    box-shadow: 2px 2px var(--c-primary-shade);
}

.box {
    background: var(--c-bg);
    border: 1px solid var(--c-primary);
    border-radius: 0.5rem;
    box-shadow: 2px 2px var(--c-primary-shade);
    padding: 1ch 1rem;
    transition: box-shadow 0.2s ease;
}

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
textarea,
select {
    background: var(--c-bg-inputs);
    color: var(--c-text);
    border: 1px solid var(--primary);
    border-radius: 0.25rem;
    padding: 1ch 0.5rem;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.input,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px var(--c-accent-alt);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--c-primary);
    margin-right: 0.5rem;
}

input[type="range"] {
    accent-color: var(--c-primary);
}

input[type="file"] {
    background: var(--c-bg-inputs);
    color: var(--c-text);
    border: 1px solid var(--c-primary);
    border-radius: 0.25rem;
    padding: 1ch 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="file"]:hover {
    border-color: var(--c-primary-alt);
}

input:invalid {
    border-color: var(--c-error);
}

input:invalid:focus {
    box-shadow: 0 0 0 2px var(--c-error);
}

fieldset {
    border: 1px solid var(--c-text-2);
    border-radius: 0.25rem;
    padding: 2ch 1rem;
    margin: 1rem 0;
}

legend {
    color: var(--c-text);
    padding: 0 0.5rem;
    font-weight: bold;
}