/* ============================================================================ MyReptileFamily — admin theme (light / dark) ---------------------------------------------------------------------------- Two palettes for the /admin and /tickets panels: light — "tropical water": pale aqua canvas, white cards, deep teal actions dark — deep blue-teal: near-black teal canvas, raised slate-teal cards Everything here is scoped to `html[data-mrff-surface="admin"]`, so the public marketing site keeps the existing green/gold brand untouched. The token *names* are the same ones landing.css already defines, which is why admin.css needed almost no changes: admin simply re-points --mrff-bg, --mrff-surface, the inks and the tonal tints at the active palette. Mode is chosen by `data-mrff-theme` on , set before first paint by the inline script in _Host.cshtml. With no attribute we follow the OS. Every ink below clears WCAG AA (4.5:1) against the canvas, the card, the subpanel AND its own tonal tint, in both modes — the pairs are asserted by AdminUiConventionTests rule 8, which parses this file. ========================================================================= */ /* ─── Light: tropical water ──────────────────────────────────────────────── */ /* */ html[data-mrff-surface="admin"], html[data-mrff-surface="admin"][data-mrff-theme="light"] { color-scheme: light; --mrff-bg: #E8F6F5; /* canvas */ --mrff-surface: #FFFFFF; /* cards */ --mrff-admin-card-bg: #FFFFFF; --mrff-admin-subpanel-bg: #F1FAF9; /* subpanel */ --mrff-admin-bar-bg: #D9EEEC; /* app bar + drawer */ --mrff-admin-border-color: #BBDCDA; --mrff-admin-border: var(--mrff-admin-border-color); --mrff-admin-neutral-fill: #DCEDEC; --mrff-ink-strong: #0C2A2E; /* bg 13.7 card 15.2 sub 14.3 */ --mrff-ink: #1B3A3F; /* bg 11.0 card 12.2 sub 11.5 */ --mrff-ink-muted: #42646A; /* bg 5.8 card 6.4 sub 6.1 */ --mrff-primary-ink: #0F6E78; /* tint 5.02 */ --mrff-secondary-ink: #91562A; /* tint 5.02 */ --mrff-success-ink: #0F7254; /* tint 4.99 */ --mrff-warning-ink: #8A5A00; /* tint 5.24 */ --mrff-error-ink: #AF342A; /* tint 5.03 */ --mrff-primary-tint: #D9F0F1; --mrff-secondary-tint: #F6EBE2; --mrff-success-tint: #DAF1EA; --mrff-warning-tint: #FAF0DE; --mrff-error-tint: #F8E1DF; /* Text that sits on a filled --mrff-primary-ink button. 5.96:1 */ --mrff-on-primary: #FFFFFF; --mrff-admin-shadow: 0 1px 2px rgba(12, 42, 46, 0.08); --mrff-admin-shadow-lift: 0 4px 14px rgba(12, 42, 46, 0.14); } /* */ /* ─── Dark: deep blue-teal ───────────────────────────────────────────────── */ /* */ html[data-mrff-surface="admin"][data-mrff-theme="dark"] { color-scheme: dark; --mrff-bg: #0B1E26; --mrff-surface: #12303A; --mrff-admin-card-bg: #12303A; --mrff-admin-subpanel-bg: #18404C; --mrff-admin-bar-bg: #0E2831; --mrff-admin-border-color: #2A5665; --mrff-admin-border: var(--mrff-admin-border-color); --mrff-admin-neutral-fill: #1E4653; --mrff-ink-strong: #EAF6F7; /* bg 15.5 card 12.6 sub 10.1 */ --mrff-ink: #D3E7EB; /* bg 13.4 card 10.9 sub 8.7 */ --mrff-ink-muted: #9FC0C7; /* bg 8.8 card 7.2 sub 5.8 */ --mrff-primary-ink: #5FD8CC; /* tint 5.32 */ --mrff-secondary-ink: #E4B480; /* tint 5.01 */ --mrff-success-ink: #6AD5A8; /* tint 5.00 */ --mrff-warning-ink: #F2BF6D; /* tint 5.02 */ --mrff-error-ink: #FF9A90; /* tint 5.49 */ --mrff-primary-tint: #124F59; --mrff-secondary-tint: #45473E; --mrff-success-tint: #13524C; --mrff-warning-tint: #4C4F37; --mrff-error-tint: #49363A; /* On dark, a filled accent button carries dark text, not white. 9.92:1 */ --mrff-on-primary: #0B1E26; --mrff-admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); --mrff-admin-shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.55); } /* */ /* No explicit choice yet → follow the OS. The inline script in _Host.cshtml normally stamps data-mrff-theme before first paint; this keeps the page correct if scripting is unavailable. */ @media (prefers-color-scheme: dark) { /* */ html[data-mrff-surface="admin"]:not([data-mrff-theme]) { color-scheme: dark; --mrff-bg: #0B1E26; --mrff-surface: #12303A; --mrff-admin-card-bg: #12303A; --mrff-admin-subpanel-bg: #18404C; --mrff-admin-bar-bg: #0E2831; --mrff-admin-border-color: #2A5665; --mrff-admin-border: var(--mrff-admin-border-color); --mrff-admin-neutral-fill: #1E4653; --mrff-ink-strong: #EAF6F7; --mrff-ink: #D3E7EB; --mrff-ink-muted: #9FC0C7; --mrff-primary-ink: #5FD8CC; --mrff-secondary-ink: #E4B480; --mrff-success-ink: #6AD5A8; --mrff-warning-ink: #F2BF6D; --mrff-error-ink: #FF9A90; --mrff-primary-tint: #124F59; --mrff-secondary-tint: #45473E; --mrff-success-tint: #13524C; --mrff-warning-tint: #4C4F37; --mrff-error-tint: #49363A; --mrff-on-primary: #0B1E26; --mrff-admin-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); --mrff-admin-shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.55); } /* */ } /* ─── MudBlazor palette ────────────────────────────────────────────────── Set on rather than inside the page shell on purpose: MudBlazor portals dialogs, menus, selects and date pickers to the document root, so overrides scoped to .mrff-admin-page would leave every popover wearing the marketing palette. html[data-mrff-surface] (0,1,1) also outranks the :root (0,1,0) block MudThemeProvider emits, so MudThemeProvider itself needs no changes and the marketing site is unaffected. */ html[data-mrff-surface="admin"] { --mud-palette-primary: var(--mrff-primary-ink); --mud-palette-primary-text: var(--mrff-on-primary); --mud-palette-secondary: var(--mrff-secondary-ink); --mud-palette-info: var(--mrff-primary-ink); --mud-palette-success: var(--mrff-success-ink); --mud-palette-warning: var(--mrff-warning-ink); --mud-palette-error: var(--mrff-error-ink); --mud-palette-background: var(--mrff-bg); --mud-palette-background-gray: var(--mrff-admin-subpanel-bg); --mud-palette-surface: var(--mrff-admin-card-bg); --mud-palette-drawer-background: var(--mrff-admin-bar-bg); --mud-palette-drawer-text: var(--mrff-ink); --mud-palette-drawer-icon: var(--mrff-ink-muted); --mud-palette-appbar-background: var(--mrff-admin-bar-bg); --mud-palette-appbar-text: var(--mrff-ink); --mud-palette-text-primary: var(--mrff-ink); --mud-palette-text-secondary: var(--mrff-ink-muted); --mud-palette-text-disabled: var(--mrff-ink-muted); --mud-palette-action-default: var(--mrff-ink-muted); --mud-palette-action-disabled: var(--mrff-ink-muted); --mud-palette-divider: var(--mrff-admin-border-color); --mud-palette-divider-light: var(--mrff-admin-border-color); --mud-palette-lines-default: var(--mrff-admin-border-color); --mud-palette-lines-inputs: var(--mrff-admin-border-color); --mud-palette-table-lines: var(--mrff-admin-border-color); --mud-palette-table-striped: var(--mrff-admin-subpanel-bg); --mud-palette-table-hover: var(--mrff-admin-subpanel-bg); } /* The page background itself. Setting it on html AND body is what actually fixes the "split background": landing.css used to paint the photo on both, and a body background paints *above* a negative z-index descendant of the layout, so the old .mrff-admin-canvas overlay only showed below the end of the body box. Admin now owns both elements outright — no overlay, no stacking-order fight. */ html[data-mrff-surface="admin"], html[data-mrff-surface="admin"] body { background-image: none !important; background-color: var(--mrff-bg); }