/* ============================================================ Swimming Rhodes — Brand Tokens Single source of truth for the MVC project, mirroring: - src/SchoolManager.Maui/Resources/Styles/Colors.xaml - client-app (Angular SPA) brand colors Loaded BEFORE site.css so site.css can consume the tokens. ============================================================ */ :root { /* --- Brand primary (indigo) --- */ --brand-primary: #3F3D8F; --brand-primary-rgb: 63, 61, 143; --brand-primary-hover: #2F2C6F; --brand-primary-soft: #E6E6FA; /* --- Aqua (secondary / info) --- */ --aqua: #00B8D9; --aqua-rgb: 0, 184, 217; --aqua-hover: #0094B0; --aqua-soft: #E0F7FA; /* --- Accent purple --- */ --accent-purple: #7B61FF; --accent-purple-rgb: 123, 97, 255; --accent-purple-soft: #EFEAFF; /* --- Status colors --- */ --success: #27AE60; --success-rgb: 39, 174, 96; --success-soft: #E9F7EF; --warning: #FF8A00; --warning-rgb: 255, 138, 0; --warning-soft: #FFF4E5; --danger: #EB5757; --danger-rgb: 235, 87, 87; --danger-soft: #FDECEC; /* --- Neutrals --- */ --text-primary: #111827; --text-secondary: #6B7280; --surface: #FFFFFF; --background: #F5F7FA; --border: #E5E7EB; /* --- Hero gradient --- */ --brand-gradient: linear-gradient(135deg, #3F3D8F 0%, #7B61FF 100%); --brand-gradient-soft: linear-gradient(135deg, rgba(63,61,143,0.08) 0%, rgba(123,97,255,0.08) 100%); /* ============================================================ Bootstrap variable overrides — auto-rebrands every btn-primary, bg-primary, text-primary, alert-primary, border-primary, etc. across all views. ============================================================ */ --bs-primary: #3F3D8F; --bs-primary-rgb: 63, 61, 143; --bs-primary-text-emphasis: #2F2C6F; --bs-primary-bg-subtle: #E6E6FA; --bs-primary-border-subtle: #C7C5E8; --bs-info: #00B8D9; --bs-info-rgb: 0, 184, 217; --bs-info-text-emphasis: #006D80; --bs-info-bg-subtle: #E0F7FA; --bs-info-border-subtle: #99E5F0; --bs-success: #27AE60; --bs-success-rgb: 39, 174, 96; --bs-success-text-emphasis: #1F7F46; --bs-success-bg-subtle: #E9F7EF; --bs-success-border-subtle: #B6E1C7; --bs-warning: #FF8A00; --bs-warning-rgb: 255, 138, 0; --bs-warning-text-emphasis: #B36100; --bs-warning-bg-subtle: #FFF4E5; --bs-warning-border-subtle: #FFD199; --bs-danger: #EB5757; --bs-danger-rgb: 235, 87, 87; --bs-danger-text-emphasis: #B83A3A; --bs-danger-bg-subtle: #FDECEC; --bs-danger-border-subtle: #F4B7B7; --bs-link-color: #3F3D8F; --bs-link-color-rgb: 63, 61, 143; --bs-link-hover-color: #2F2C6F; --bs-link-hover-color-rgb: 47, 44, 111; } /* ============================================================ Dark mode — driven by user system preference OR explicit data-bs-theme="dark" attribute on . ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --brand-primary: #6D6AEF; --brand-primary-rgb: 109, 106, 239; --brand-primary-hover: #3F3D8F; --brand-primary-soft: #1E1B4B; --aqua: #22D3EE; --aqua-rgb: 34, 211, 238; --aqua-hover: #00B8D9; --aqua-soft: #0E3A47; --accent-purple: #A78BFA; --accent-purple-rgb: 167, 139, 250; --accent-purple-soft: #2D1F5C; --success: #4ADE80; --success-rgb: 74, 222, 128; --success-soft: #14361F; --warning: #FB923C; --warning-rgb: 251, 146, 60; --warning-soft: #3D1F08; --danger: #F87171; --danger-rgb: 248, 113, 113; --danger-soft: #3D1414; --text-primary: #F9FAFB; --text-secondary: #94A3B8; --surface: #1E293B; --background: #0F172A; --border: #334155; --brand-gradient: linear-gradient(135deg, #3F3D8F 0%, #7B61FF 100%); /* Bootstrap dark mode tokens */ --bs-primary: #6D6AEF; --bs-primary-rgb: 109, 106, 239; --bs-info: #22D3EE; --bs-info-rgb: 34, 211, 238; --bs-success: #4ADE80; --bs-success-rgb: 74, 222, 128; --bs-warning: #FB923C; --bs-warning-rgb: 251, 146, 60; --bs-danger: #F87171; --bs-danger-rgb: 248, 113, 113; --bs-body-bg: #0F172A; --bs-body-color: #F9FAFB; --bs-secondary-bg: #1E293B; --bs-tertiary-bg: #334155; --bs-border-color: #334155; --bs-link-color: #A78BFA; --bs-link-hover-color: #C4B5FD; } } /* Explicit dark theme (overrides media query if user toggles) */ [data-bs-theme="dark"] { --brand-primary: #6D6AEF; --brand-primary-rgb: 109, 106, 239; --brand-primary-hover: #3F3D8F; --brand-primary-soft: #1E1B4B; --aqua: #22D3EE; --aqua-rgb: 34, 211, 238; --aqua-soft: #0E3A47; --accent-purple: #A78BFA; --accent-purple-soft: #2D1F5C; --success: #4ADE80; --warning: #FB923C; --danger: #F87171; --text-primary: #F9FAFB; --text-secondary: #94A3B8; --surface: #1E293B; --background: #0F172A; --border: #334155; --bs-primary: #6D6AEF; --bs-primary-rgb: 109, 106, 239; --bs-info: #22D3EE; --bs-info-rgb: 34, 211, 238; --bs-success: #4ADE80; --bs-warning: #FB923C; --bs-danger: #F87171; --bs-body-bg: #0F172A; --bs-body-color: #F9FAFB; } /* ============================================================ Brand utility classes (analogous to Bootstrap utilities) ============================================================ */ .bg-brand { background-color: var(--brand-primary) !important; color: #fff !important; } .bg-brand-soft { background-color: var(--brand-primary-soft) !important; color: var(--brand-primary) !important; } .bg-brand-gradient { background: var(--brand-gradient) !important; color: #fff !important; } .bg-aqua { background-color: var(--aqua) !important; color: #fff !important; } .bg-aqua-soft { background-color: var(--aqua-soft) !important; color: var(--aqua-hover) !important; } .bg-accent-purple { background-color: var(--accent-purple) !important; color: #fff !important; } .bg-accent-purple-soft { background-color: var(--accent-purple-soft) !important; color: var(--accent-purple) !important; } .text-brand { color: var(--brand-primary) !important; } .text-brand-hover:hover { color: var(--brand-primary-hover) !important; } .text-aqua { color: var(--aqua) !important; } .text-accent-purple { color: var(--accent-purple) !important; } .border-brand { border-color: var(--brand-primary) !important; } .border-aqua { border-color: var(--aqua) !important; } /* Brand button — solid */ .btn-brand { --btn-bg: var(--brand-primary); --btn-bg-hover: var(--brand-primary-hover); color: #fff; background-color: var(--btn-bg); border: 1px solid var(--btn-bg); } .btn-brand:hover, .btn-brand:focus { color: #fff; background-color: var(--btn-bg-hover); border-color: var(--btn-bg-hover); } .btn-brand:focus { box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.35); } /* Brand button — outline */ .btn-outline-brand { color: var(--brand-primary); background-color: transparent; border: 1px solid var(--brand-primary); } .btn-outline-brand:hover, .btn-outline-brand:focus { color: #fff; background-color: var(--brand-primary); border-color: var(--brand-primary); } /* Brand button — gradient (CTA) */ .btn-brand-gradient { color: #fff; background: var(--brand-gradient); border: none; transition: filter 0.2s ease, transform 0.1s ease; } .btn-brand-gradient:hover, .btn-brand-gradient:focus { color: #fff; filter: brightness(1.05); transform: translateY(-1px); } /* Hero / branded surfaces */ .brand-hero { background: var(--brand-gradient); color: #fff; } .brand-hero a { color: #E6E6FA; } .brand-hero a:hover { color: #fff; } /* Subtle brand surface (cards, banners) */ .surface-brand-soft { background-color: var(--brand-primary-soft); color: var(--brand-primary-hover); border: 1px solid var(--brand-primary-soft); } /* ============================================================ Branded navbar (top app bar) ============================================================ */ .navbar-brand-app { background: var(--brand-gradient) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.25); } .navbar-brand-app .navbar-brand, .navbar-brand-app .nav-link { color: #fff !important; } .navbar-brand-app .nav-link:hover, .navbar-brand-app .nav-link:focus { color: #E6E6FA !important; } .navbar-brand-app .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); } .navbar-brand-app .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .navbar-brand-app .dropdown-toggle::after { color: #fff; } /* Theme toggle button placement inside the brand navbar */ .theme-toggle-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; transition: background 0.2s ease, transform 0.15s ease; cursor: pointer; } .theme-toggle-btn:hover, .theme-toggle-btn:focus { background: rgba(255, 255, 255, 0.22); color: #fff; transform: scale(1.05); outline: none; } .theme-toggle-btn i { font-size: 1rem; } /* When app is in light mode but navbar is on white (legacy): adjust */ .navbar-light-on-white .theme-toggle-btn { background: var(--brand-primary-soft); border-color: var(--brand-primary-soft); color: var(--brand-primary); } /* ============================================================ Dark mode adjustments for legacy site.css grays These selectors retroactively fix hardcoded grays so they read correctly in dark mode WITHOUT having to rewrite site.css. ============================================================ */ [data-bs-theme="dark"] .modern-footer, :root:not([data-bs-theme="light"]) .modern-footer { background-color: var(--surface) !important; border-top-color: var(--border) !important; color: var(--text-secondary) !important; } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer, :root:not([data-bs-theme="light"]) .modal-header, :root:not([data-bs-theme="light"]) .modal-footer { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } [data-bs-theme="dark"] .modal-content, :root:not([data-bs-theme="light"]) .modal-content { background-color: var(--surface); color: var(--text-primary); } [data-bs-theme="dark"] .table thead th, :root:not([data-bs-theme="light"]) .table thead th { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-bs-theme="dark"] .table-hover tbody tr:hover, :root:not([data-bs-theme="light"]) .table-hover tbody tr:hover { background-color: rgba(var(--brand-primary-rgb), 0.12) !important; color: var(--text-primary) !important; } [data-bs-theme="dark"] .table thead.table-light th, :root:not([data-bs-theme="light"]) .table thead.table-light th { background-color: var(--surface) !important; color: var(--text-primary) !important; } [data-bs-theme="dark"] .info-label, :root:not([data-bs-theme="light"]) .info-label { color: var(--text-secondary) !important; } [data-bs-theme="dark"] .info-value, :root:not([data-bs-theme="light"]) .info-value { color: var(--text-primary) !important; } [data-bs-theme="dark"] .inline-edit-modern .display-mode:hover, :root:not([data-bs-theme="light"]) .inline-edit-modern .display-mode:hover { background-color: var(--background) !important; } [data-bs-theme="dark"] footer.bg-light, [data-bs-theme="dark"] .bg-light, :root:not([data-bs-theme="light"]) footer.bg-light { background-color: var(--surface) !important; color: var(--text-secondary) !important; } [data-bs-theme="dark"] .dropdown-menu, :root:not([data-bs-theme="light"]) .dropdown-menu { background-color: var(--surface); border-color: var(--border); color: var(--text-primary); } [data-bs-theme="dark"] .dropdown-item, :root:not([data-bs-theme="light"]) .dropdown-item { color: var(--text-primary); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus, :root:not([data-bs-theme="light"]) .dropdown-item:hover, :root:not([data-bs-theme="light"]) .dropdown-item:focus { background-color: rgba(var(--brand-primary-rgb), 0.18); color: var(--text-primary); } [data-bs-theme="dark"] .card, :root:not([data-bs-theme="light"]) .card { background-color: var(--surface); color: var(--text-primary); border-color: var(--border); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, :root:not([data-bs-theme="light"]) .form-control, :root:not([data-bs-theme="light"]) .form-select { background-color: var(--surface); color: var(--text-primary); border-color: var(--border); } [data-bs-theme="dark"] .form-control::placeholder, :root:not([data-bs-theme="light"]) .form-control::placeholder { color: var(--text-secondary); opacity: 0.7; } /* ============================================================ Dropdown contrast fixes (light mode) — Bootstrap text-* utilities resolve to brand tokens which can be low contrast on white. Use Bootstrap's *-text-emphasis tokens for AA on white surfaces. ============================================================ */ .dropdown-menu .dropdown-item.text-info, .dropdown-menu .dropdown-item .text-info, .dropdown-menu a.text-info { color: var(--bs-info-text-emphasis) !important; } .dropdown-menu .dropdown-item.text-warning, .dropdown-menu .dropdown-item .text-warning, .dropdown-menu a.text-warning { color: var(--bs-warning-text-emphasis) !important; } .dropdown-menu .dropdown-item.text-success, .dropdown-menu .dropdown-item .text-success, .dropdown-menu a.text-success { color: var(--bs-success-text-emphasis) !important; } .dropdown-menu .dropdown-item.text-danger, .dropdown-menu .dropdown-item .text-danger, .dropdown-menu a.text-danger { color: var(--bs-danger-text-emphasis) !important; } .dropdown-menu .dropdown-item.text-primary, .dropdown-menu .dropdown-item .text-primary, .dropdown-menu a.text-primary { color: var(--bs-primary-text-emphasis) !important; } /* Custom buttons — slight dark-mode adjustment so they don't blow out */ [data-bs-theme="dark"] .btn-orange, :root:not([data-bs-theme="light"]) .btn-orange { background-color: #e07300; border-color: #c96600; } [data-bs-theme="dark"] .btn-orange:hover, :root:not([data-bs-theme="light"]) .btn-orange:hover { background-color: #c96600; border-color: #b35a00; } [data-bs-theme="dark"] .btn-purple, :root:not([data-bs-theme="light"]) .btn-purple { background-color: #5a33a3; border-color: #4d2c8c; } [data-bs-theme="dark"] .btn-magenta, :root:not([data-bs-theme="light"]) .btn-magenta { background-color: #cc00cc; border-color: #b300b3; }