:root {
    --primary-color: #0f2f57;
    --secondary-color: #1e4e8c;
    --accent-color: #3b82f6;
    --soft-accent: #bfdbfe;
    --primary-color-rgb: 15, 47, 87;
    --secondary-color-rgb: 30, 78, 140;
    --accent-color-rgb: 59, 130, 246;
    --soft-accent-rgb: 191, 219, 254;
    --page-bg: #f8fbff;
    --sidebar-bg: #f8fbff;
    --sidebar-text: var(--primary-color);
    --sidebar-muted: rgba(var(--secondary-color-rgb), 0.68);
    --sidebar-hover-bg: #eff6ff;
    --sidebar-active-bg: var(--accent-color);
    --sidebar-active-text: #ffffff;
    --navbar-bg: #ffffff;
    --navbar-text: var(--primary-color);
    --footer-bg: #ffffff;
    --footer-text: var(--primary-color);
    --card-bg: #ffffff;
    --card-header: #eff6ff;
    --table-header: #eff6ff;
    --table-header-text: var(--primary-color);
    --table-hover: #f0f7ff;
    --link-color: #2563eb;
    --border-color: rgba(var(--secondary-color-rgb), 0.12);
    --control-bg: #ffffff;
    --control-hover-bg: #eff6ff;
    --primary: var(--accent-color);
    --primary-hover: #2563eb;
    --secondary: var(--secondary-color);
    --brand-primary-600: #2563eb;
    --brand-primary-200: #bfdbfe;
    --brand-primary-100: #dbeafe;
    --brand-primary-50: #eff6ff;
    --brand-soft: #eff6ff;
    --brand-ink: var(--primary-color);
    --brand-muted: #55759b;
}

/* Blue theme component overrides */
.admin-sidebar .nav-link:not(.active):hover,
.admin-sidebar .nav-link:not(.active):focus,
.admin-sidebar .nav-link:not(.active):focus-visible {
    background: rgba(var(--accent-color-rgb), 0.16) !important;
    color: var(--primary-color) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.social-modal .modal-header,
.chalisa-modal .modal-header,
.expandable-textarea-modal .modal-header,
#import-mantras-modal .modal-header,
.god-mantras-modal-dialog .modal-header,
.mantra-graph-modal .modal-header,
.japlogs-graph-modal .modal-header {
    border-bottom-color: rgba(var(--accent-color-rgb), 0.24) !important;
}

.expandable-textarea-modal .modal-header {
    border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.24) !important;
}

.expandable-textarea-modal .modal-footer,
#import-mantras-modal .modal-footer {
    border-top: 1px solid rgba(var(--accent-color-rgb), 0.24) !important;
}

.mantra-display-card::before {
    color: rgba(var(--accent-color-rgb), 0.1) !important;
}

.btn:active,
.btn.active,
.btn:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn:focus-visible,
button:active,
button:not(:disabled):not(.disabled):active,
.action-icon:active,
.action-icon.active,
.action-icon:not(:disabled):not(.disabled):active,
.action-icon:focus-visible,
.action-icon:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-check:active + .btn-primary,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-check:active + .btn-secondary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-check:active + .btn-outline-primary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-check:active + .btn-outline-secondary,
.btn-warning:active,
.btn-warning.active,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-check:active + .btn-warning,
.ranking-toggle.btn-outline-primary:active,
.ranking-toggle.btn-primary:active,
.show > .btn-primary.dropdown-toggle:active,
.show > .btn-secondary.dropdown-toggle:active,
.show > .btn-outline-primary.dropdown-toggle:active,
.show > .btn-outline-secondary.dropdown-toggle:active {
    background: var(--control-hover-bg) !important;
    color: var(--primary-color) !important;
    border-color: rgba(var(--accent-color-rgb), 0.35) !important;
    box-shadow: none !important;
}

.bi-book,
.book-vector,
.mantra-book-icon {
    color: var(--accent-color) !important;
    text-shadow: 0 0 0.6rem rgba(var(--accent-color-rgb), 0.7);
}

/* Keep blue theme buttons on-brand while pressed/focused. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus-visible,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle,
.show > .btn-primary.dropdown-toggle:active {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success:focus-visible,
.btn-success:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.show > .btn-success.dropdown-toggle,
.show > .btn-success.dropdown-toggle:active {
    background: #ecfdf3 !important;
    border-color: #abefc6 !important;
    color: #067647 !important;
    box-shadow: none !important;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:focus-visible,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.show > .btn-secondary.dropdown-toggle,
.show > .btn-secondary.dropdown-toggle:active {
    background: var(--brand-primary-100) !important;
    border-color: var(--brand-primary-200) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:focus-visible,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-primary.dropdown-toggle:active {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.show > .btn-outline-secondary.dropdown-toggle,
.show > .btn-outline-secondary.dropdown-toggle:active {
    background: var(--control-hover-bg) !important;
    border-color: rgba(var(--accent-color-rgb), 0.35) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

/* Blue-theme click highlight for form actions, reset/cancel, and import/export buttons. */
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle,
.show > .btn-primary.dropdown-toggle:active {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.24) !important;
}

.btn-success:focus-visible,
.btn-success:active,
.btn-success.active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.show > .btn-success.dropdown-toggle,
.show > .btn-success.dropdown-toggle:active {
    background: #ecfdf3 !important;
    border-color: #86efac !important;
    color: #067647 !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.18) !important;
}

.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.show > .btn-secondary.dropdown-toggle,
.show > .btn-secondary.dropdown-toggle:active,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.show > .btn-outline-secondary.dropdown-toggle,
.show > .btn-outline-secondary.dropdown-toggle:active {
    background: var(--brand-primary-100) !important;
    border-color: var(--brand-primary-200) !important;
    color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.18) !important;
}