/* Design tokens: maroon/red brand, dark (default) + light palettes. Toggled via [data-theme] on . */ :root, [data-theme="dark"] { --brand: #b3122b; --brand-strong: #8a0e21; --brand-glow: rgba(179, 18, 43, 0.45); --bg: #0a0a0d; --bg-elevated: #131317; --bg-card: #17171c; --bg-hover: #1f1f26; --border: #2a2a32; --text: #f2f0f1; --text-muted: #9a98a1; --success: #2ecc71; --warning: #f5a623; --danger: #ff4757; --info: #4aa8ff; --shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } [data-theme="light"] { --brand: #a30f27; --brand-strong: #7d0b1e; --brand-glow: rgba(163, 15, 39, 0.18); --bg: #f5f5f7; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-hover: #f0eef1; --border: #e2e0e4; --text: #201f24; --text-muted: #6b6975; --success: #1e9e57; --warning: #c67c00; --danger: #d92d3d; --info: #1c7ed6; --shadow: 0 6px 18px rgba(20, 10, 15, 0.08); } html, body { background-color: var(--bg); color: var(--text); } body { transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--brand); } .text-muted { color: var(--text-muted) !important; } .card, .mt-card { background-color: var(--bg-card); border: 1px solid var(--border); color: var(--text); } .mt-glow { box-shadow: 0 0 0 1px var(--brand-glow), 0 0 24px var(--brand-glow); } .btn-brand { background-color: var(--brand); border-color: var(--brand); color: #fff; } .btn-brand:hover, .btn-brand:focus { background-color: var(--brand-strong); border-color: var(--brand-strong); color: #fff; } .btn-outline-brand { border-color: var(--brand); color: var(--brand); background: transparent; } .btn-outline-brand:hover { background-color: var(--brand); color: #fff; } .form-control, .form-select { background-color: var(--bg-elevated); border-color: var(--border); color: var(--text); } .form-control:focus, .form-select:focus { background-color: var(--bg-elevated); color: var(--text); border-color: var(--brand); box-shadow: 0 0 0 0.2rem var(--brand-glow); } .form-control::placeholder { color: var(--text-muted); } .table { color: var(--text); --bs-table-bg: transparent; --bs-table-hover-bg: var(--bg-hover); --bs-table-color: var(--text); --bs-table-color-state: var(--text); border-color: var(--border); } .table thead th { color: var(--text); background-color: var(--bg-hover); border-color: var(--border); } .table tbody td { color: var(--text); border-color: var(--border); } .table tbody tr { border-color: var(--border); } .table tbody tr:hover { background-color: var(--bg-hover); } .table-responsive { background-color: transparent; } .modal-content { background-color: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } .dropdown-menu { background-color: var(--bg-elevated); border-color: var(--border); } .dropdown-item { color: var(--text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }