:root {
    --color-background: grey;
    --color-background-primary: #f5f5f7;
    --color-background-secondary: white;
    --color-background-mute: #f2f2f2;
    --color-background-accent: black;
    --color-background-highlight: rgb(148, 194, 234);
    --color: black;
    --color-mute: #474747;
    --color-accent: white;
    --border-radius: 12px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
    --table-row-selected: rgb(189, 216, 241);
}

[data-theme-scheme='dark'] {
    --color-background: rgb(30, 30, 30);
    --color-background-secondary: rgb(40, 40, 40);
    --color-background-mute: #474747;
    --color-background-accent: rgb(255, 255, 255);
    --color: #fafafa;
    --color-mute: #afafaf;
    --color-accent: rgb(0, 0, 0);
    --border-radius: 12px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow: none;
}

.bg-primary {
    background-color: var(--color-background-primary);
} 
.bg-secondary {
    background-color: var(--color-background-secondary);
} 
.bg-mute {
    background-color: var(--color-background-mute);
} 
.bg-accent {
    background-color: var(--color-background-accent);
} 
.bg-highlight {
    background-color: var(--color-background-highlight);
} 

.rounded {
    border-radius: var(--border-radius);
}
.shadow {
    /* box-shadow: var(--shadow); */
}
    
button {
    all: unset;
    appearance: none;
    cursor: pointer;
    line-height: 1.5;
    font-size: 1.8rem;
    border: none;
    background: none;
    border-radius: 0;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: #0071e3;
    border: 2px solid #0071e3;
    color: white;
    border-radius: var(--border-radius);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.6rem;
    transition: background-color 0.2s ease-in-out;
    white-space: nowrap;
}


.btn.btn-outline {
    background: none;
    border: 2px solid #0071e3;
    color: var(--color);
}

.btn:hover {
    background-color: #005bb5;
    border: 2px solid #005bb5;
    color: white;
}

.btn-contrast {

}

.btn-contrast:hover {

}

input:not([type="checkbox"]),
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.2s ease-in-out;
}

input:not([type="checkbox"]):focus,
select:focus,
textarea:focus {
    border-color: #0071e3;
    outline: none;
}

textarea {
    resize: none;
}

/* tr.tr-highlighted {
    background-color: rgb(255, 181, 160) !important;
} */