:root { --brand-blue: #0b5ed7; --brand-dark: #1c2b39; --brand-gray: #6c757d; --brand-light: #f5f7fa; } body { background-color: var(--brand-light); } .auth-page { min-height: 100vh; } .btn-primary { background-color: var(--brand-blue); border-color: var(--brand-blue); } .btn-primary:hover { background-color: #094db3; border-color: #094db3; } [data-bs-theme="dark"] body, body.dark-mode { background-color: var(--brand-dark); color: #e9ecef; } /* Bootstrap 5.3 auto-switches most component colors via data-bs-theme="dark" on . These cover our own custom classes, which don't use Bootstrap's theme variables. */ [data-bs-theme="dark"] .card { background-color: #22323f; border-color: #33465a; } [data-bs-theme="dark"] .table { --bs-table-bg: #22323f; --bs-table-color: #e9ecef; --bs-table-border-color: #33465a; } [data-bs-theme="dark"] .signature-pad-canvas { background: #f8f9fa; /* keep signature area light so ink stays visible/legible */ } [data-theme-toggle] { cursor: pointer; }