:root {
    --brand-nav: #0f172a;
    --brand-primary: #10b981;
    --brand-primary-hover: #059669;
    --brand-primary-soft: #ecfdf5;
    --brand-primary-muted: #d1fae5;
    --brand-primary-border: #6ee7b7;
    --brand-primary-text: #047857;
    --brand-primary-text-strong: #065f46;
    --brand-primary-ring: #a7f3d0;
}

.admin-topbar {
    background-color: var(--brand-nav) !important;
    border-bottom-color: rgba(16, 185, 129, 0.14) !important;
}

.admin-nav-drawer {
    background-color: var(--brand-nav) !important;
}

.bg-blue-600 {
    background-color: var(--brand-primary) !important;
}

.bg-blue-700 {
    background-color: var(--brand-primary-hover) !important;
}

.hover\:bg-blue-700:hover {
    background-color: var(--brand-primary-hover) !important;
}

.bg-blue-50 {
    background-color: var(--brand-primary-soft) !important;
}

.bg-blue-100 {
    background-color: var(--brand-primary-muted) !important;
}

.bg-blue-50\/40,
.bg-blue-50\/50 {
    background-color: rgb(236 253 245 / 0.55) !important;
}

.text-blue-600,
.text-blue-700 {
    color: var(--brand-primary-text) !important;
}

.text-blue-800,
.text-blue-900 {
    color: var(--brand-primary-text-strong) !important;
}

.hover\:text-blue-800:hover {
    color: var(--brand-primary-hover) !important;
}

.hover\:bg-blue-50:hover {
    background-color: var(--brand-primary-soft) !important;
}

.hover\:bg-blue-100:hover {
    background-color: var(--brand-primary-muted) !important;
}

.border-blue-200,
.border-blue-300 {
    border-color: var(--brand-primary-ring) !important;
}

.border-blue-400,
.hover\:border-blue-400:hover {
    border-color: var(--brand-primary) !important;
}

.ring-blue-200 {
    --tw-ring-color: var(--brand-primary-ring) !important;
}

.focus\:border-blue-400:focus,
.focus\:border-blue-300:focus {
    border-color: var(--brand-primary) !important;
}

.focus\:ring-blue-400:focus,
.focus\:ring-blue-200:focus,
.focus\:ring-1:focus.focus\:ring-blue-400:focus,
.focus\:ring-2:focus.focus\:ring-blue-200:focus,
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--brand-primary-ring) !important;
}

.bg-indigo-50 {
    background-color: var(--brand-primary-soft) !important;
}

.text-indigo-700,
.text-indigo-800 {
    color: var(--brand-primary-text) !important;
}

.text-blue-800\/80 {
    color: rgb(6 95 70 / 0.8) !important;
}

.theme-toggle__input:checked + .theme-toggle__track {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary-hover) !important;
}

html:not(.dark) .theme-toggle--panel .theme-toggle__input:checked + .theme-toggle__track {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary-hover) !important;
}

.site-legend__code {
    color: var(--brand-primary-text-strong) !important;
}

.dark .site-legend__code {
    color: #6ee7b7 !important;
}

.dark .site-legend__pill {
    border-color: rgba(16, 185, 129, 0.22) !important;
}

.dark .bg-blue-50,
.dark .bg-blue-100,
.dark .bg-blue-50\/40,
.dark .bg-blue-50\/50 {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

.dark .text-blue-600,
.dark .text-blue-700,
.dark .text-blue-800,
.dark .text-blue-900 {
    color: #6ee7b7 !important;
}

.dark .text-indigo-700,
.dark .text-indigo-800 {
    color: #6ee7b7 !important;
}

.dark .hover\:bg-blue-50:hover,
.dark .hover\:bg-blue-100:hover {
    background-color: rgba(16, 185, 129, 0.2) !important;
}

.dark .hover\:text-blue-800:hover {
    color: #a7f3d0 !important;
}

.dark .border-blue-200,
.dark .border-blue-300,
.dark .border-blue-400 {
    border-color: rgba(16, 185, 129, 0.28) !important;
}

.dark .ring-blue-200 {
    --tw-ring-color: rgba(16, 185, 129, 0.35) !important;
}

.dark .theme-toggle__input:checked + .theme-toggle__track,
html.dark .theme-toggle__track {
    background: rgba(16, 185, 129, 0.35) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

.dark .theme-toggle--panel .theme-toggle__input:checked + .theme-toggle__track,
html.dark .theme-toggle--panel .theme-toggle__track {
    background: rgba(16, 185, 129, 0.35) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}
