:root {
    --cassiopeia-color-primary: hsl(220, 67%, 20%);
    --cassiopeia-color-link: hsl(220, 67%, 40%);
    --cassiopeia-color-hover: hsl(220, 67%, 50%);
    --bs-primary: var(--cassiopeia-color-primary);
    --bs-primary-rgb: 17, 40, 85;
    --bs-link-color: var(--cassiopeia-color-link);
    --bs-link-color-rgb: 34, 79, 170;
    --bs-link-hover-color: var(--cassiopeia-color-hover);
    --bs-link-hover-color-rgb: 43, 99, 212;
    --bs-body-font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--cassiopeia-color-primary) 0%, hsl(220, 67%, 32%) 100%);
}

.card {
    border: 0;
    border-radius: 0.5rem;
}

h1 {
    color: var(--cassiopeia-color-primary);
}

.table td,
.table th {
    vertical-align: middle;
}

.table thead th {
    color: var(--cassiopeia-color-primary);
    border-bottom: 2px solid var(--cassiopeia-color-primary);
}

.form-check-input {
    width: 1.4em;
    height: 1.4em;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--cassiopeia-color-link);
    border-color: var(--cassiopeia-color-link);
}

.form-check-input:focus,
.form-control:focus {
    border-color: var(--cassiopeia-color-hover);
    box-shadow: 0 0 0 0.25rem rgba(43, 99, 212, 0.25);
}

.btn-primary {
    --bs-btn-bg: var(--cassiopeia-color-link);
    --bs-btn-border-color: var(--cassiopeia-color-link);
    --bs-btn-hover-bg: var(--cassiopeia-color-hover);
    --bs-btn-hover-border-color: var(--cassiopeia-color-hover);
    --bs-btn-active-bg: var(--cassiopeia-color-primary);
    --bs-btn-active-border-color: var(--cassiopeia-color-primary);
    --bs-btn-focus-shadow-rgb: 43, 99, 212;
}

.table-success {
    --bs-table-bg: hsl(220, 67%, 95%);
    --bs-table-color: var(--cassiopeia-color-primary);
}