:root {
    --tenant-primary: #1b293c;
    --tenant-primary-rgb: 27, 41, 60;
    --tenant-primary-foreground: #ffffff;
    --tenant-primary-readable-light: #1b293c;
    --tenant-primary-readable-dark: #93c5fd;
    --tenant-primary-readable: var(--tenant-primary-readable-light);
}

html.dark {
    --tenant-primary-readable: var(--tenant-primary-readable-dark);
}

.bg-primary {
    background-color: var(--tenant-primary) !important;
}

.text-primary {
    color: var(--tenant-primary-readable) !important;
}

.border-primary {
    border-color: var(--tenant-primary) !important;
}

.btn-primary {
    background-color: var(--tenant-primary) !important;
    border-color: var(--tenant-primary) !important;
    color: var(--tenant-primary-foreground) !important;
}

.nav-link.active {
    background-color: rgba(var(--tenant-primary-rgb), 0.10) !important;
    color: var(--tenant-primary-readable) !important;
}

.hover\:bg-primary\/5:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.05) !important;
}

.hover\:bg-primary\/10:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.10) !important;
}

.hover\:bg-primary\/20:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.20) !important;
}

.hover\:bg-primary\/90:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.90) !important;
}

.hover\:border-primary\/50:hover {
    border-color: rgba(var(--tenant-primary-rgb), 0.50) !important;
}

.focus\:ring-primary:focus {
    --tw-ring-color: rgba(var(--tenant-primary-rgb), 1) !important;
}

.focus\:ring-primary\/20:focus {
    --tw-ring-color: rgba(var(--tenant-primary-rgb), 0.20) !important;
}

.focus\:border-primary:focus,
.form-input:focus,
.form-select:focus {
    border-color: var(--tenant-primary) !important;
}