/* ═══════════════════════════════════════════════════════════════════════════ * AuthCore Radzen Theme Overrides * ═══════════════════════════════════════════════════════════════════════════ * Date: 2026-03-18 * Purpose: Override Radzen CSS variables with AuthCore brand colors * * CONVENTION: All theme selectors use html[data-bs-theme="X"] prefix. * The data-bs-theme attribute is always set on , never on * or descendant elements. See theme-sync.js applyTheme(). * * NOTE: !important on CSS custom property declarations IS intentional. * It elevates cascade priority so our :root overrides beat Radzen's :root * declarations regardless of stylesheet load order. Theme-specific blocks * also use !important to beat our own :root !important declarations. * * Input selectors use :is() for compression. Specificity caveats: * - Simple class selectors (.rz-textbox, .rz-inputtext, etc.) grouped in one :is() * - Compound selectors (.rz-form-field.rz-variant-outlined) kept separate * - :focus and :focus-within are separate pseudo-classes; textbox/dropdown use * :focus, while numeric/autocomplete use :focus-within * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * GLOBAL FALLBACK OVERRIDES (theme-attribute independent) * * Radzen's theme CSS (e.g., material-dark.css) defines many variables on :root * (e.g., --rz-primary: #bb86fc). Depending on how RadzenTheme is configured, * the page may not include a reliable data-rz-theme attribute for targeting. * * These :root overrides ensure our brand tokens win regardless of how the * theme is applied. * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Primary color - Blue (industry standard for CTAs) */ --rz-primary: var(--aspire-blue) !important; --rz-primary-light: var(--aspire-blue-light) !important; /* NOTE: Keep a neutral fallback here; theme blocks refine it per light/dark. */ --rz-primary-lighter: rgba(var(--aspire-blue-rgb), 0.10) !important; --rz-primary-dark: var(--aspire-blue-dark) !important; --rz-primary-darker: var(--aspire-blue-darker) !important; /* Secondary color - Burgundy (brand accent) */ --rz-secondary: var(--aspire-burgundy) !important; --rz-secondary-light: var(--aspire-burgundy-light) !important; /* NOTE: Keep a neutral fallback here; theme blocks refine it per light/dark. */ --rz-secondary-lighter: rgba(var(--aspire-burgundy-rgb), 0.10) !important; --rz-secondary-dark: var(--aspire-burgundy-dark) !important; --rz-secondary-darker: var(--aspire-burgundy-darker) !important; /* Text on primary backgrounds */ --rz-on-primary: var(--aspire-primary-foreground) !important; /* Text on "lighter" primary surfaces (Radzen defaults this to theme primary) */ --rz-on-primary-lighter: var(--rz-on-primary) !important; /* Navigation (PanelMenu/Menu) selected item styling */ --rz-menu-item-selected-background-color: var(--rz-primary) !important; --rz-menu-item-selected-color: var(--rz-on-primary) !important; --rz-menu-top-item-selected-background-color: var(--rz-primary) !important; --rz-menu-top-item-selected-color: var(--rz-on-primary) !important; /* Note: PanelMenu active/hover background overrides live in the named [data-bs-theme="light|dark|brand"] blocks below. RadzenAppearanceToggle always sets [data-bs-theme] on , so any :root fallback for those would be unreachable. */ /* Links and "text" buttons often key off theme primary */ --rz-link-color: var(--rz-primary) !important; --rz-link-hover-color: var(--rz-primary-light) !important; /* Body/layout background — ensures our surface token controls the page background */ --rz-base-background-color: var(--aspire-surface, #ffffff) !important; --rz-body-background-color: var(--aspire-surface, #ffffff) !important; } /* (Plan 367 Tier 1) Removed the @media (prefers-color-scheme: dark) :root panel-menu/switch fallback — RadzenAppearanceToggle always sets [data-bs-theme] on , so the named light/dark/brand blocks below always win. */ /* ═══════════════════════════════════════════════════════════════════════════ * BOOTSTRAP THEME COMPATIBILITY * RadzenAppearanceToggle sets [data-bs-theme]. These blocks ensure our * light/dark refinements apply even if data-rz-theme is not present. * ═══════════════════════════════════════════════════════════════════════════ */ html[data-bs-theme="light"] { --rz-primary: var(--aspire-primary) !important; --rz-primary-light: var(--aspire-primary-light) !important; --rz-primary-dark: var(--aspire-primary-dark) !important; --rz-primary-darker: var(--aspire-blue-darker) !important; --rz-primary-lighter: var(--aspire-blue-subtle) !important; --rz-secondary-lighter: var(--aspire-burgundy-subtle) !important; --rz-input-background-color: var(--aspire-input-bg) !important; --rz-input-color: var(--aspire-text-primary) !important; --rz-input-border: 2px solid var(--aspire-border) !important; --rz-input-border-block-end: 2px solid var(--aspire-border) !important; --rz-input-hover-border: 2px solid var(--aspire-primary) !important; --rz-input-hover-border-block-end: 2px solid var(--aspire-primary) !important; --rz-input-focus-border: 2px solid var(--aspire-primary) !important; --rz-input-focus-border-block-end: 2px solid var(--aspire-primary) !important; --rz-input-placeholder-color: var(--aspire-text-tertiary) !important; --rz-button-background-color: var(--aspire-primary) !important; --rz-button-color: var(--aspire-primary-foreground) !important; /* Ensure readable text on light "primary-lighter" backgrounds (nav active, chips, etc.) */ --rz-on-primary-lighter: var(--rz-primary) !important; /* Body/layout/header/sidebar backgrounds — light mode */ --rz-base-background-color: var(--aspire-surface) !important; --rz-body-background-color: var(--aspire-surface) !important; --rz-header-background-color: var(--aspire-surface-elevated) !important; --rz-sidebar-background-color: var(--aspire-surface-elevated) !important; --rz-panel-menu-item-active-background-color: rgba(var(--aspire-blue-rgb), 0.10) !important; --rz-panel-menu-item-active-color: var(--rz-primary) !important; --rz-panel-menu-item-active-indicator: var(--rz-primary) !important; --rz-panel-menu-item-hover-background-color: rgba(var(--aspire-blue-rgb), 0.07) !important; --rz-panel-menu-item-hover-color: var(--rz-text-color) !important; --rz-panel-menu-item-2nd-level-active-background-color: rgba(var(--aspire-blue-rgb), 0.08) !important; --rz-panel-menu-item-2nd-level-active-color: var(--rz-primary) !important; --rz-panel-menu-item-3rd-level-active-background-color: rgba(var(--aspire-blue-rgb), 0.08) !important; --rz-panel-menu-item-3rd-level-active-color: var(--rz-primary) !important; } html[data-bs-theme="dark"] { --rz-primary: var(--aspire-primary) !important; --rz-primary-light: var(--aspire-primary-light) !important; --rz-primary-dark: var(--aspire-primary-dark) !important; --rz-primary-darker: var(--aspire-blue-darker) !important; --rz-primary-lighter: var(--aspire-nav-active-bg) !important; --rz-secondary-lighter: rgba(var(--aspire-burgundy-rgb), 0.25) !important; --rz-input-background-color: var(--aspire-input-bg) !important; --rz-input-color: var(--aspire-text-primary) !important; --rz-input-border: 2px solid var(--aspire-border) !important; --rz-input-border-block-end: 2px solid var(--aspire-border) !important; --rz-input-hover-border: 2px solid var(--aspire-primary) !important; --rz-input-hover-border-block-end: 2px solid var(--aspire-primary) !important; --rz-input-focus-border: 2px solid var(--aspire-primary) !important; --rz-input-focus-border-block-end: 2px solid var(--aspire-primary) !important; --rz-input-placeholder-color: var(--aspire-text-tertiary) !important; --rz-button-background-color: var(--aspire-primary) !important; --rz-button-color: var(--aspire-primary-foreground) !important; /* Ensure readable text on dark "primary-lighter" backgrounds (nav active, chips, etc.) */ --rz-on-primary-lighter: var(--rz-on-primary) !important; /* Body/layout/header/sidebar backgrounds — dark mode (pure black via design tokens) */ --rz-base-background-color: var(--aspire-surface) !important; --rz-body-background-color: var(--aspire-surface) !important; --rz-header-background-color: var(--aspire-surface-elevated) !important; --rz-sidebar-background-color: var(--aspire-surface-elevated) !important; /* Switch — Radzen default var(--rz-base-600) is invisible on dark surfaces */ --rz-switch-background-color: var(--aspire-switch-track-bg) !important; --rz-switch-checked-background-color: var(--rz-primary) !important; --rz-switch-circle-background-color: #ffffff !important; --rz-switch-checked-circle-background-color: #ffffff !important; /* Cyan-blue nav (Figma dark-blue identity) */ --rz-panel-menu-item-active-background-color: var(--aspire-nav-active-bg) !important; --rz-panel-menu-item-active-color: var(--aspire-white) !important; --rz-panel-menu-item-active-indicator: #3b9cff !important; --rz-panel-menu-item-hover-background-color: var(--aspire-nav-hover-bg) !important; --rz-panel-menu-item-hover-color: var(--aspire-text-primary) !important; --rz-panel-menu-item-2nd-level-active-background-color: var(--aspire-nav-sublevel-active-bg) !important; --rz-panel-menu-item-2nd-level-active-color: var(--aspire-white) !important; --rz-panel-menu-item-3rd-level-active-background-color: var(--aspire-nav-sublevel-active-bg) !important; --rz-panel-menu-item-3rd-level-active-color: var(--aspire-white) !important; } /* Dark theme header text (white on dark header) */ html[data-bs-theme="dark"] .app-header__on-primary, html[data-bs-theme="dark"] .app-header__on-primary * { color: var(--aspire-white) !important; } /* Default (no theme set) - assume dark mode */ .app-header__on-primary, .app-header__on-primary * { color: var(--aspire-white); } /* ═══════════════════════════════════════════════════════════════════════════ * BRAND THEME OVERRIDES * ═══════════════════════════════════════════════════════════════════════════ * Date: 2026-01-30 * Purpose: Override Radzen variables for Brand theme (Figma dark burgundy) * Uses brand tokens defined in design-tokens.css * ═══════════════════════════════════════════════════════════════════════════ */ html[data-bs-theme="brand"] { /* Base colors - Brand palette */ /* Primary is the cream/champagne action color in brand theme */ --rz-primary: var(--aspire-primary) !important; --rz-primary-light: var(--aspire-primary-light) !important; --rz-primary-lighter: color-mix(in srgb, var(--aspire-primary) 25%, transparent) !important; --rz-primary-dark: var(--aspire-primary) !important; --rz-primary-darker: var(--aspire-brand-bg-darkest) !important; /* Secondary color - Brand main (burgundy) */ --rz-secondary: var(--aspire-brand-main) !important; --rz-secondary-light: var(--aspire-brand-border) !important; --rz-secondary-lighter: var(--aspire-brand-secondary-lighter-25) !important; --rz-secondary-dark: var(--aspire-brand-bg-darkest) !important; /* Background colors Plan 335 Phase 1 slice 1 — shell visual baseline: Body canvas is true-black so the chrome reads as one elevated dark-grey panel against it. Header + sidebar share the same elevated surface. Oxblood is reserved for accents (active row, > section headings, primary actions), not for the chrome itself. */ --rz-base-background-color: var(--brand-canvas) !important; --rz-body-background-color: var(--brand-canvas) !important; --rz-header-background-color: var(--brand-chrome) !important; --rz-sidebar-background-color: var(--brand-chrome) !important; --rz-base-100: var(--aspire-brand-bg-input) !important; --rz-base-200: var(--aspire-brand-bg-hover) !important; --rz-base-300: var(--aspire-brand-main) !important; --rz-base-400: var(--aspire-brand-border) !important; --rz-base-500: var(--aspire-brand-border-hover) !important; /* Text colors — brand is monochrome by default; point Radzen text tokens at the --brand-text-* set. */ --rz-text-color: var(--brand-text) !important; --rz-text-secondary-color: var(--brand-text-idle) !important; --rz-text-disabled-color: var(--brand-text-dim) !important; --rz-on-primary: var(--aspire-primary-foreground) !important; --rz-on-primary-lighter: var(--aspire-primary-foreground) !important; /* Border colors */ --rz-border-color: var(--aspire-brand-border) !important; /* Panel Menu (sidebar navigation) - Brand styling. RadzenPanelMenu has no current consumer in the Brave shell (BraveSidebar is hand-rolled). These tokens stay defined so any future RadzenPanelMenu caller picks up brand-coherent neutrals instead of upstream Radzen blue. The 3 oxblood active-bg lines were dropped in Plan 367 Tier 1 — active state defers to upstream Radzen primary tint until a real consumer re-introduces a brand-specific active style. */ --rz-panel-menu-background-color: var(--brand-chrome) !important; --rz-panel-menu-color: var(--brand-text-idle) !important; --rz-panel-menu-item-background-color: transparent !important; --rz-panel-menu-item-color: var(--brand-text-idle) !important; --rz-panel-menu-icon-color: var(--brand-text-idle) !important; --rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, 0.04) !important; --rz-panel-menu-item-hover-color: var(--brand-text) !important; --rz-panel-menu-item-active-color: var(--brand-text) !important; --rz-panel-menu-item-active-indicator: var(--aspire-primary) !important; --rz-panel-menu-item-2nd-level-background-color: transparent !important; --rz-panel-menu-item-2nd-level-active-color: var(--brand-text) !important; --rz-panel-menu-item-3rd-level-background-color: transparent !important; --rz-panel-menu-item-3rd-level-active-color: var(--brand-text) !important; --rz-panel-menu-item-border: none !important; /* Form inputs - Brand styling */ --rz-input-background-color: var(--aspire-input-bg) !important; --rz-input-color: var(--aspire-surface-foreground) !important; --rz-input-border: 2px solid var(--aspire-border) !important; --rz-input-border-block-end: 2px solid var(--aspire-border) !important; --rz-input-hover-border: 2px solid var(--aspire-accent) !important; --rz-input-hover-border-block-end: 2px solid var(--aspire-accent) !important; --rz-input-focus-border: 2px solid var(--aspire-accent) !important; --rz-input-focus-border-block-end: 2px solid var(--aspire-accent) !important; --rz-input-placeholder-color: var(--aspire-text-placeholder) !important; --rz-input-disabled-color: var(--aspire-text-disabled) !important; --rz-input-disabled-border-block-end: 2px solid var(--aspire-border) !important; /* Buttons - Brand styling */ --rz-button-background-color: var(--aspire-primary) !important; --rz-button-color: var(--aspire-primary-foreground) !important; /* Functional colors - Brand palette */ --rz-success: var(--aspire-brand-success) !important; --rz-success-light: var(--aspire-brand-success) !important; --rz-warning: var(--aspire-brand-warning) !important; --rz-warning-light: var(--aspire-brand-warning) !important; --rz-danger: var(--aspire-brand-error) !important; --rz-danger-light: var(--aspire-brand-error) !important; --rz-info: var(--aspire-brand-info) !important; --rz-info-light: var(--aspire-brand-info) !important; /* Switch — visible track on dark brand surface */ --rz-switch-background-color: var(--aspire-brand-border) !important; --rz-switch-checked-background-color: var(--aspire-brand-button) !important; --rz-switch-circle-background-color: #ffffff !important; --rz-switch-checked-circle-background-color: #ffffff !important; /* Links - Gold accent (separate from primary buttons) */ --rz-link-color: var(--aspire-brand-gold) !important; --rz-link-hover-color: var(--aspire-brand-gold-hover) !important; /* Card styling */ --rz-card-background-color: var(--aspire-brand-bg-input) !important; --rz-card-color: var(--brand-text) !important; /* Header / sidebar text color only — backgrounds set above per Plan 335 Phase 1 slice 1. Do NOT re-set the background here or the late declarations will override the elevated-grey chrome. */ --rz-header-color: var(--brand-text) !important; --rz-sidebar-color: var(--brand-text-idle) !important; /* Accordion/Fieldset styling for section headers */ --rz-fieldset-legend-color: var(--brand-text) !important; --rz-accordion-header-color: var(--brand-text) !important; --rz-accordion-header-background-color: transparent !important; --rz-accordion-header-hover-background-color: var(--aspire-brand-bg-hover-subtle) !important; /* Accordion item/content background - match page background (darkest), not form field background */ --rz-accordion-item-background-color: var(--aspire-brand-bg-darkest) !important; /* Accordion item colors - MUST override here to prevent gold inheritance */ --rz-accordion-item-color: var(--brand-text) !important; --rz-accordion-selected-color: var(--brand-text) !important; --rz-accordion-hover-color: var(--brand-text) !important; /* ───────────────────────────────────────────────────────────────────────── * Brand design tokens (Plan 335 design-system pass — pre-Cards). * Canonical palette for the Brave in-app shell. All brand-block rules MUST * reference these tokens instead of raw hex literals (see * BRAND_DESIGN_SYSTEM.md §2 Rule #1). * ───────────────────────────────────────────────────────────────────── */ --brand-canvas: #050506; --brand-chrome: #0e0e10; --brand-surface: #141416; --brand-surface-hover: #1a1a1d; --brand-border-soft: rgba(255, 255, 255, 0.06); --brand-text: #f5f5f7; --brand-text-idle: #b5b5ba; --brand-text-muted: #8a8a8f; --brand-text-dim: #6e6e73; --brand-accent: #98131B; --brand-marker: #dc2626; --brand-marker-hot: #ef4444; --brand-danger-bg: rgba(220, 38, 38, 0.06); --brand-danger-border: rgba(220, 38, 38, 0.45); /* ───────────────────────────────────────────────────────────────────────── * Row tokens (Plan 361 Phase A — single source for the dark-gray row look * from the contacts-list reference screenshot). Any list row, wizard step * card, preview card, or generic surface card in the brand theme must * compose its container from these three tokens — no `color-mix` gradients, * no per-page accent borders, no glow shadows. Wizard / preview / confirm * pages will be migrated onto these in Plan 361 Phase B+C. * ───────────────────────────────────────────────────────────────────── */ --brand-row-surface: var(--brand-surface); /* #141416 dark-gray row body */ --brand-row-border: 1px solid var(--brand-border-soft); --brand-row-radius: 12px; } /* ═══════════════════════════════════════════════════════════════════════════ * BRAND THEME - ELEMENT-SPECIFIC OVERRIDES * ═══════════════════════════════════════════════════════════════════════════ * PRUNED (Plan 065): 9 of 13 blocks deleted — CSS variable overrides alone * are sufficient for layout/body bg, sidebar bg, header bg, sidebar toggle, * accordion headers, accordion icons, and card bg/color. * Only 4 blocks remain below (each annotated REQUIRED with verification). * ═══════════════════════════════════════════════════════════════════════════ */ /* REQUIRED: .app-header__on-primary is a custom app class, not Radzen-managed — verified Plan 065 */ html[data-bs-theme="brand"] .app-header__on-primary, html[data-bs-theme="brand"] .app-header__on-primary * { color: var(--brand-text) !important; } /* REQUIRED: Cards inside accordions need transparent bg + no shadow — verified Plan 065 */ html[data-bs-theme="brand"] .rz-accordion-content .rz-card { background-color: transparent !important; box-shadow: none !important; } /* REQUIRED: Variant.Text buttons use gold accent, not --rz-primary burgundy — verified Plan 065 */ html[data-bs-theme="brand"] :is(.rz-button.rz-variant-text, .rz-button.rz-text) { color: var(--aspire-brand-gold) !important; } html[data-bs-theme="brand"] :is(.rz-button.rz-variant-text, .rz-button.rz-text):hover { color: var(--aspire-brand-gold-hover) !important; background-color: var(--aspire-brand-bg-hover-subtle) !important; } /* ═══════════════════════════════════════════════════════════════════════════ * WIZARD ACTION BUTTONS (Plan 361 Phase B) * ═══════════════════════════════════════════════════════════════════════════ * Shared global utility classes for wizard CTAs. Global on purpose — wizard * submit buttons may live inside a WizardStepCard or outside one (e.g., the * exchange confirm page submit lives in its own section). Defining these * here instead of inside a scoped .razor.css avoids needing `::deep` and * keeps every wizard CTA visually identical across consumers. * * Brand-only: the in-app shell is brand-locked today. If light/dark wizard * flows are ever needed, add base rules above this block and let the brand * scope tighten them. * ═══════════════════════════════════════════════════════════════════════════ */ html[data-bs-theme="brand"] .wizard-action-primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.2rem; padding: 0.85rem 1.25rem; background: var(--brand-accent); color: var(--brand-text); border: 0; border-radius: 0.7rem; font-family: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: filter var(--aspire-transition-fast), opacity var(--aspire-transition-fast); } html[data-bs-theme="brand"] .wizard-action-primary:hover:not(:disabled), html[data-bs-theme="brand"] .wizard-action-primary:focus-visible:not(:disabled) { filter: brightness(1.08); outline: none; } html[data-bs-theme="brand"] .wizard-action-primary:focus-visible:not(:disabled) { box-shadow: 0 0 0 3px var(--aspire-focus-ring); } html[data-bs-theme="brand"] .wizard-action-primary:disabled { opacity: 0.55; cursor: not-allowed; } html[data-bs-theme="brand"] .wizard-action-secondary { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0.5rem 0.65rem; color: var(--brand-text-muted); font-family: var(--aspire-font-family-mono, ui-monospace, "JetBrains Mono", monospace); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: lowercase; cursor: pointer; text-decoration: none; } html[data-bs-theme="brand"] .wizard-action-secondary:hover, html[data-bs-theme="brand"] .wizard-action-secondary:focus-visible { color: var(--brand-text); text-decoration: underline; outline: none; } /* ═══════════════════════════════════════════════════════════════════════════ * COMPOSITE CONTROL BORDER STRIPPING * ═══════════════════════════════════════════════════════════════════════════ * Composite Radzen controls contain inner .rz-inputtext elements that * inherit per-theme border rules. These global stripping rules ensure only * the outer control border is visible. * * Specificity: doubled class (.rz-inputtext.rz-inputtext = 0-3-0) beats * per-theme selectors (html[data-bs-theme] .rz-inputtext = 0-2-1). * * NOTE: .rz-spinner does NOT exist — the correct Radzen numeric wrapper * class is .rz-numeric (verified in Radzen standard.css). * NOTE: RadzenPassword renders as plain , * no wrapper class, no stripping needed. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Dropdown internals: .rz-dropdown > .rz-dropdown-label.rz-inputtext ── */ .rz-dropdown .rz-dropdown-label, .rz-dropdown .rz-dropdown-label.rz-inputtext, .rz-dropdown .rz-dropdown-label.rz-inputtext:hover, .rz-dropdown .rz-dropdown-label.rz-inputtext:focus { border: none !important; background-color: transparent !important; box-shadow: none !important; } /* ── Numeric internals: .rz-numeric > input.rz-inputtext ── */ .rz-numeric .rz-inputtext.rz-inputtext, .rz-numeric .rz-inputtext.rz-inputtext:hover, .rz-numeric .rz-inputtext.rz-inputtext:focus { border: none !important; background-color: transparent !important; box-shadow: none !important; } /* ── AutoComplete internals: .rz-autocomplete > input.rz-inputtext ── */ .rz-autocomplete .rz-inputtext.rz-inputtext, .rz-autocomplete .rz-inputtext.rz-inputtext:hover, .rz-autocomplete .rz-inputtext.rz-inputtext:focus { border: none !important; background-color: transparent !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ * LIGHT THEME - ELEMENT-SPECIFIC OVERRIDES * ═══════════════════════════════════════════════════════════════════════════ * VERIFIED REQUIRED (Plan 065): 18/19 tests fail without these overrides. * Radzen material-dark-base.css hardcodes dark values on elements — CSS * variable overrides alone are insufficient for light theme. * Only body background-color works via --rz-body-background-color variable. * ═══════════════════════════════════════════════════════════════════════════ */ /* Light theme background - override Radzen's dark layout backgrounds */ html[data-bs-theme="light"] :is(.rz-layout, .rz-body) { background-color: var(--aspire-white) !important; color: var(--aspire-gray-900) !important; } /* Light theme sidebar */ html[data-bs-theme="light"] .rz-sidebar { background-color: var(--aspire-gray-50) !important; color: var(--aspire-gray-900) !important; } /* Light theme header */ html[data-bs-theme="light"] .rz-header { background-color: var(--aspire-white) !important; color: var(--aspire-gray-900) !important; border-bottom: 1px solid var(--aspire-gray-200) !important; } /* Light theme header text (app-header__on-primary class) */ html[data-bs-theme="light"] .app-header__on-primary, html[data-bs-theme="light"] .app-header__on-primary * { color: var(--aspire-gray-900) !important; } /* Light theme sidebar toggle (hamburger icon) */ html[data-bs-theme="light"] .rz-sidebar-toggle { color: var(--aspire-gray-900) !important; } /* Light theme sidebar toggle hover - remove dark background */ html[data-bs-theme="light"] .rz-sidebar-toggle:hover { background-color: var(--aspire-gray-100) !important; color: var(--aspire-gray-900) !important; } /* Light theme text colors */ html[data-bs-theme="light"] .rz-text { color: var(--aspire-gray-900) !important; } /* Light theme page headings (H1-H6) */ html[data-bs-theme="light"] :is(h1, h2, h3, h4, h5, h6, .rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6) { color: var(--aspire-gray-900) !important; } /* Light theme icons in content area — Radzen 9.x uses .rzi class */ html[data-bs-theme="light"] .rz-body :is(.rzi, .rz-icon) { color: var(--aspire-gray-700) !important; } /* Light theme cards */ html[data-bs-theme="light"] .rz-card { background-color: var(--aspire-gray-50) !important; color: var(--aspire-gray-900) !important; } /* Light theme form field labels */ html[data-bs-theme="light"] .rz-form-field-label { color: var(--aspire-text-primary) !important; } html[data-bs-theme="light"] .rz-form-field-helper { color: var(--aspire-text-secondary) !important; } /* Light theme inputs — :is() compressed */ html[data-bs-theme="light"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-autocomplete), html[data-bs-theme="light"] .rz-form-field.rz-variant-outlined, html[data-bs-theme="light"] .rz-form-field.rz-variant-outlined .rz-form-field-content { --rz-form-field-label-floating-background-color: var(--aspire-surface-elevated) !important; --rz-form-field-label-focus-color: var(--aspire-primary) !important; --rz-form-field-label-padding: 0 0.375rem !important; background-color: var(--aspire-input-bg) !important; color: var(--aspire-text-primary) !important; border: 2px solid var(--aspire-border) !important; border-radius: 2px !important; } html[data-bs-theme="light"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-autocomplete):hover, html[data-bs-theme="light"] .rz-form-field.rz-variant-outlined:hover, html[data-bs-theme="light"] .rz-form-field.rz-variant-outlined:hover .rz-form-field-content { background-color: var(--aspire-input-bg) !important; border-color: var(--aspire-primary) !important; } html[data-bs-theme="light"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown):focus, html[data-bs-theme="light"] :is(.rz-numeric, .rz-autocomplete):focus-within, html[data-bs-theme="light"] .rz-form-field.rz-variant-outlined:focus-within, html[data-bs-theme="light"] .rz-form-field.rz-variant-outlined:focus-within .rz-form-field-content { background-color: var(--aspire-input-bg) !important; border-color: var(--aspire-primary) !important; box-shadow: 0 0 20px var(--aspire-glow-primary) !important; outline: none !important; } html[data-bs-theme="light"] .rz-form-field.rz-variant-outlined :is(.rzi, .rz-icon) { color: var(--aspire-primary) !important; } html[data-bs-theme="light"] :is(.rz-textbox, .rz-inputtext, .rz-textarea)::placeholder { color: var(--aspire-text-tertiary) !important; } /* Light theme accordions */ html[data-bs-theme="light"] .rz-accordion-header, html[data-bs-theme="light"] .rz-accordion-header .rz-accordion-title { color: var(--aspire-gray-900) !important; } /* Light theme panel menu — Radzen 9.x also uses .rz-navigation-item */ html[data-bs-theme="light"] .rz-panel-menu { background-color: var(--aspire-gray-50) !important; color: var(--aspire-gray-900) !important; } html[data-bs-theme="light"] :is(.rz-panel-menu-item, .rz-navigation-item-text) { color: var(--aspire-gray-900) !important; } /* Light theme buttons */ html[data-bs-theme="light"] .rz-button.rz-primary, html[data-bs-theme="light"] .rz-button.rz-primary.rz-shade-default { background-color: var(--aspire-primary) !important; color: var(--aspire-primary-foreground) !important; border: 2px solid var(--aspire-primary) !important; box-shadow: none !important; } html[data-bs-theme="light"] .rz-button.rz-light, html[data-bs-theme="light"] .rz-button.rz-light.rz-variant-flat { background-color: transparent !important; color: var(--aspire-primary) !important; border: 2px solid var(--aspire-primary) !important; box-shadow: none !important; } html[data-bs-theme="light"] .rz-button.rz-success, html[data-bs-theme="light"] .rz-button.rz-success.rz-shade-default { background-color: transparent !important; color: var(--aspire-success) !important; border: 2px solid var(--aspire-success) !important; box-shadow: none !important; } html[data-bs-theme="light"] .rz-button.rz-warning, html[data-bs-theme="light"] .rz-button.rz-warning.rz-shade-default { background-color: transparent !important; color: var(--aspire-warning) !important; border: 2px solid var(--aspire-warning) !important; box-shadow: none !important; } html[data-bs-theme="light"] :is(.rz-button.rz-danger, .rz-button.rz-error), html[data-bs-theme="light"] :is(.rz-button.rz-danger.rz-shade-default, .rz-button.rz-error.rz-shade-default) { background-color: var(--aspire-danger) !important; color: var(--aspire-white) !important; border: 2px solid var(--aspire-danger) !important; box-shadow: none !important; } @media (hover: hover) and (pointer: fine) { html[data-bs-theme="light"] .rz-button.rz-primary:not(.rz-state-disabled):not(:active):hover, html[data-bs-theme="light"] .rz-button.rz-primary.rz-shade-default:not(.rz-state-disabled):not(:active):hover { box-shadow: 0 0 20px var(--aspire-glow-primary) !important; } html[data-bs-theme="light"] .rz-button.rz-light:not(.rz-state-disabled):not(:active):hover { background-color: transparent !important; color: var(--aspire-primary) !important; border-color: var(--aspire-primary) !important; box-shadow: 0 0 20px var(--aspire-glow-primary) !important; } html[data-bs-theme="light"] .rz-button.rz-success:not(.rz-state-disabled):not(:active):hover { background-color: var(--aspire-success) !important; color: var(--aspire-white) !important; box-shadow: 0 0 20px var(--aspire-glow-success) !important; } html[data-bs-theme="light"] .rz-button.rz-warning:not(.rz-state-disabled):not(:active):hover { background-color: var(--aspire-warning) !important; color: var(--aspire-white) !important; box-shadow: 0 0 20px var(--aspire-glow-warning) !important; } html[data-bs-theme="light"] :is(.rz-button.rz-danger, .rz-button.rz-error):not(.rz-state-disabled):not(:active):hover { box-shadow: 0 0 20px var(--aspire-glow-destructive) !important; } } html[data-bs-theme="light"] :is(.rz-button.rz-primary, .rz-button.rz-light, .rz-button.rz-success, .rz-button.rz-warning, .rz-button.rz-danger, .rz-button.rz-error):not(.rz-state-disabled):not(:active):focus-visible { box-shadow: 0 0 0 3px var(--aspire-focus-ring) !important; } html[data-bs-theme="light"] :is(.rz-button.rz-primary, .rz-button.rz-light, .rz-button.rz-success, .rz-button.rz-warning, .rz-button.rz-danger, .rz-button.rz-error).rz-state-disabled { opacity: 0.5 !important; cursor: not-allowed !important; } /* ═══════════════════════════════════════════════════════════════════════════ * DARK THEME - FORM AND BUTTON PATTERNS * Matches the Figma dark-blue input and button language. * ═══════════════════════════════════════════════════════════════════════════ */ html[data-bs-theme="dark"] .rz-form-field-label { color: var(--aspire-text-primary) !important; } html[data-bs-theme="dark"] .rz-form-field-helper { color: var(--aspire-text-secondary) !important; } /* Dark theme inputs — :is() compressed */ html[data-bs-theme="dark"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-autocomplete), html[data-bs-theme="dark"] .rz-form-field.rz-variant-outlined, html[data-bs-theme="dark"] .rz-form-field.rz-variant-outlined .rz-form-field-content { --rz-form-field-label-floating-background-color: var(--aspire-input-bg) !important; --rz-form-field-label-focus-color: var(--aspire-primary) !important; --rz-form-field-label-padding: 0 0.375rem !important; background-color: var(--aspire-input-bg) !important; color: var(--aspire-text-primary) !important; border: 2px solid var(--aspire-border) !important; border-radius: 2px !important; } html[data-bs-theme="dark"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-autocomplete):hover, html[data-bs-theme="dark"] .rz-form-field.rz-variant-outlined:hover, html[data-bs-theme="dark"] .rz-form-field.rz-variant-outlined:hover .rz-form-field-content { background-color: var(--aspire-input-bg) !important; border-color: var(--aspire-primary) !important; } html[data-bs-theme="dark"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown):focus, html[data-bs-theme="dark"] :is(.rz-numeric, .rz-autocomplete):focus-within, html[data-bs-theme="dark"] .rz-form-field.rz-variant-outlined:focus-within, html[data-bs-theme="dark"] .rz-form-field.rz-variant-outlined:focus-within .rz-form-field-content { background-color: var(--aspire-input-bg) !important; border-color: var(--aspire-primary) !important; box-shadow: 0 0 20px var(--aspire-glow-primary) !important; outline: none !important; } html[data-bs-theme="dark"] .rz-form-field.rz-variant-outlined :is(.rzi, .rz-icon) { color: var(--aspire-primary) !important; } html[data-bs-theme="dark"] :is(.rz-textbox, .rz-inputtext, .rz-textarea)::placeholder { color: var(--aspire-text-tertiary) !important; } html[data-bs-theme="dark"] .rz-button.rz-primary, html[data-bs-theme="dark"] .rz-button.rz-primary.rz-shade-default { background-color: var(--aspire-primary) !important; color: var(--aspire-primary-foreground) !important; border: 2px solid var(--aspire-primary) !important; box-shadow: none !important; } html[data-bs-theme="dark"] .rz-button.rz-light, html[data-bs-theme="dark"] .rz-button.rz-light.rz-variant-flat { background-color: var(--aspire-surface) !important; color: var(--aspire-primary) !important; border: 2px solid var(--aspire-primary) !important; box-shadow: none !important; } html[data-bs-theme="dark"] .rz-button.rz-success, html[data-bs-theme="dark"] .rz-button.rz-success.rz-shade-default { background-color: var(--aspire-surface) !important; color: var(--aspire-success) !important; border: 2px solid var(--aspire-success) !important; box-shadow: none !important; } html[data-bs-theme="dark"] .rz-button.rz-warning, html[data-bs-theme="dark"] .rz-button.rz-warning.rz-shade-default { background-color: var(--aspire-surface) !important; color: var(--aspire-warning) !important; border: 2px solid var(--aspire-warning) !important; box-shadow: none !important; } html[data-bs-theme="dark"] :is(.rz-button.rz-danger, .rz-button.rz-error), html[data-bs-theme="dark"] :is(.rz-button.rz-danger.rz-shade-default, .rz-button.rz-error.rz-shade-default) { background-color: var(--aspire-danger) !important; color: var(--aspire-white) !important; border: 2px solid var(--aspire-danger) !important; box-shadow: none !important; } @media (hover: hover) and (pointer: fine) { html[data-bs-theme="dark"] .rz-button.rz-primary:not(.rz-state-disabled):not(:active):hover, html[data-bs-theme="dark"] .rz-button.rz-primary.rz-shade-default:not(.rz-state-disabled):not(:active):hover { box-shadow: 0 0 20px var(--aspire-glow-primary) !important; } html[data-bs-theme="dark"] .rz-button.rz-light:not(.rz-state-disabled):not(:active):hover { background-color: var(--aspire-surface) !important; color: var(--aspire-primary) !important; border-color: var(--aspire-primary) !important; box-shadow: 0 0 20px var(--aspire-glow-primary) !important; } html[data-bs-theme="dark"] .rz-button.rz-success:not(.rz-state-disabled):not(:active):hover { background-color: var(--aspire-success) !important; color: var(--aspire-white) !important; box-shadow: 0 0 20px var(--aspire-glow-success) !important; } html[data-bs-theme="dark"] .rz-button.rz-warning:not(.rz-state-disabled):not(:active):hover { background-color: var(--aspire-warning) !important; color: var(--aspire-white) !important; box-shadow: 0 0 20px var(--aspire-glow-warning) !important; } html[data-bs-theme="dark"] :is(.rz-button.rz-danger, .rz-button.rz-error):not(.rz-state-disabled):not(:active):hover { box-shadow: 0 0 20px var(--aspire-glow-destructive) !important; } } html[data-bs-theme="dark"] :is(.rz-button.rz-primary, .rz-button.rz-light, .rz-button.rz-success, .rz-button.rz-warning, .rz-button.rz-danger, .rz-button.rz-error):not(.rz-state-disabled):not(:active):focus-visible { box-shadow: 0 0 0 3px var(--aspire-focus-ring) !important; } html[data-bs-theme="dark"] :is(.rz-button.rz-primary, .rz-button.rz-light, .rz-button.rz-success, .rz-button.rz-warning, .rz-button.rz-danger, .rz-button.rz-error).rz-state-disabled { opacity: 0.5 !important; cursor: not-allowed !important; } /* ═══════════════════════════════════════════════════════════════════════════ * BRAND THEME - FORM PATTERNS * VERIFIED REQUIRED (Plan 065): 4/6 tested properties need these overrides. * Radzen ignores CSS variable overrides for secondary-color text, form labels, * checkbox borders, and light button backgrounds. * * Color Hierarchy (Brand Theme — monochrome by default per Plan 365 follow-up): * --brand-text (#f5f5f7) : Primary body text, accordion headers, section titles * --brand-text-idle (#b5b5ba) : Secondary text, descriptions * --brand-text-muted (#8a8a8f) : Labels, captions, helper text * --brand-text-dim (#6e6e73) : Placeholders, disabled text * * Button Hierarchy (Brand Theme): * ButtonStyle.Primary → Cream/Champagne fill (--aspire-brand-gold #e8d5b7) * Variant.Text → Gold (--aspire-brand-gold) for secondary/inline adds * ButtonStyle.Light → Neutral - Cancel, dismiss actions * ═══════════════════════════════════════════════════════════════════════════ */ /* Form field labels and helper text - ensure visibility in brand theme */ html[data-bs-theme="brand"] .rz-text-secondary-color { color: var(--brand-text-muted) !important; } /* Form field labels (RadzenFormField) */ html[data-bs-theme="brand"] :is(.rz-form-field-label, .rz-form-field-helper) { color: var(--brand-text-muted) !important; } /* Brand theme inputs — :is() compressed */ html[data-bs-theme="brand"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-autocomplete), html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined, html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined .rz-form-field-content { --rz-form-field-label-floating-background-color: var(--aspire-input-bg) !important; --rz-form-field-label-focus-color: var(--aspire-accent) !important; --rz-form-field-label-padding: 0 0.375rem !important; background-color: var(--aspire-input-bg) !important; border-color: var(--aspire-border) !important; border-radius: 2px !important; } html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined.rz-state-focused .rz-form-field-label, html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined :not(.rz-state-empty) ~ .rz-form-field-label { background-color: var(--aspire-input-bg) !important; border-radius: 2px !important; } html[data-bs-theme="brand"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-autocomplete):hover, html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined:hover, html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined:hover .rz-form-field-content { background-color: var(--aspire-input-bg) !important; border-color: var(--aspire-accent) !important; } html[data-bs-theme="brand"] :is(.rz-textbox, .rz-inputtext, .rz-textarea, .rz-dropdown):focus, html[data-bs-theme="brand"] :is(.rz-numeric, .rz-autocomplete):focus-within, html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined:focus-within, html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined:focus-within .rz-form-field-content { background-color: var(--aspire-input-bg) !important; border-color: var(--aspire-accent) !important; box-shadow: 0 0 20px var(--aspire-glow-primary) !important; outline: none !important; } html[data-bs-theme="brand"] .rz-form-field.rz-variant-outlined :is(.rzi, .rz-icon) { color: var(--aspire-accent) !important; } /* Section labels - used for form sections like "Ways to Connect" */ html[data-bs-theme="brand"] .section-label { color: var(--brand-text-muted) !important; } /* Brand theme checkbox styling */ html[data-bs-theme="brand"] .rz-chkbox-box { border-color: var(--aspire-brand-border) !important; background-color: var(--aspire-brand-bg-input) !important; } html[data-bs-theme="brand"] .rz-chkbox-box.rz-state-active { background-color: var(--aspire-brand-button) !important; border-color: var(--aspire-brand-button) !important; } /* Brand theme radio button styling */ html[data-bs-theme="brand"] .rz-radiobutton-box { border-color: var(--aspire-brand-border) !important; } html[data-bs-theme="brand"] .rz-radiobutton-box.rz-state-active { border-color: var(--aspire-brand-button) !important; } html[data-bs-theme="brand"] .rz-radiobutton-icon { background-color: var(--aspire-brand-button) !important; } /* Brand theme light button (Cancel buttons) */ html[data-bs-theme="brand"] .rz-button.rz-light, html[data-bs-theme="brand"] .rz-button.rz-variant-flat.rz-light { background-color: var(--aspire-brand-bg-hover) !important; color: var(--brand-text) !important; border: 1px solid var(--aspire-brand-border) !important; } html[data-bs-theme="brand"] .rz-button.rz-light:hover { background-color: var(--aspire-brand-main) !important; } /* Brand theme primary buttons follow the reference cream primary treatment */ html[data-bs-theme="brand"] .rz-button.rz-primary, html[data-bs-theme="brand"] .rz-button.rz-primary.rz-shade-default { background-color: var(--aspire-primary) !important; color: var(--aspire-primary-foreground) !important; border: 2px solid var(--aspire-primary) !important; box-shadow: none !important; } @media (hover: hover) and (pointer: fine) { html[data-bs-theme="brand"] .rz-button.rz-primary:not(.rz-state-disabled):not(:active):hover, html[data-bs-theme="brand"] .rz-button.rz-primary.rz-shade-default:not(.rz-state-disabled):not(:active):hover { background-color: var(--aspire-primary) !important; color: var(--aspire-primary-foreground) !important; border-color: var(--aspire-primary) !important; box-shadow: none !important; } } html[data-bs-theme="brand"] .rz-button.rz-primary:not(.rz-state-disabled):not(:active):focus-visible, html[data-bs-theme="brand"] .rz-button.rz-primary.rz-shade-default:not(.rz-state-disabled):not(:active):focus-visible { background-color: var(--aspire-primary) !important; color: var(--aspire-primary-foreground) !important; border-color: var(--aspire-primary) !important; box-shadow: 0 0 0 3px var(--aspire-focus-ring) !important; } html[data-bs-theme="brand"] .rz-button.rz-primary.rz-state-disabled, html[data-bs-theme="brand"] .rz-button.rz-primary.rz-shade-default.rz-state-disabled { background-color: var(--aspire-primary) !important; color: var(--aspire-primary-foreground) !important; border: 2px solid var(--aspire-primary) !important; box-shadow: none !important; opacity: 0.55 !important; cursor: not-allowed !important; } /* ═══════════════════════════════════════════════════════════════════════════ * COMPONENT-SPECIFIC OVERRIDES * VERIFIED (Plan 065): Only card border-radius is required. * Sidebar border, links, focus states, badges all handled by CSS variables. * ═══════════════════════════════════════════════════════════════════════════ */ /* REQUIRED: Radzen default card border-radius differs from design tokens — verified Plan 065 */ .rz-card { border-radius: var(--aspire-border-radius-lg); } /* ═══════════════════════════════════════════════════════════════════════════ * UTILITY CLASSES * Brand-specific utility classes for use in Razor components * ═══════════════════════════════════════════════════════════════════════════ */ /* Brand background colors */ .bg-brand-burgundy { background-color: var(--aspire-burgundy) !important; } .bg-brand-burgundy-light { background-color: var(--aspire-burgundy-light) !important; } .bg-brand-burgundy-subtle { background-color: var(--aspire-burgundy-subtle) !important; } .bg-brand-blue { background-color: var(--aspire-blue) !important; } .bg-brand-blue-light { background-color: var(--aspire-blue-light) !important; } .bg-brand-blue-subtle { background-color: var(--aspire-blue-subtle) !important; } /* Brand text colors */ .text-brand-burgundy { color: var(--aspire-burgundy) !important; } .text-brand-blue { color: var(--aspire-blue) !important; } /* Brand border colors */ .border-brand-burgundy { border-color: var(--aspire-burgundy) !important; } .border-brand-blue { border-color: var(--aspire-blue) !important; } /* ============================================================ Shell-header action buttons (Create-flow Cancel / primary). Used by pages that publish action buttons through ShellHeader's slot. Mirrors the look of the existing `card-view-header-link` text affordance but supports button semantics so submit triggers via the `form` attribute work. ============================================================ */ .brave-shell-action { background: transparent; border: 0; padding: 0.25rem 0.5rem; color: var(--aspire-text-muted); font-family: var(--aspire-font-family-mono, ui-monospace, "JetBrains Mono", "IBM Plex Mono", monospace); font-size: var(--aspire-font-size-sm); font-weight: 700; line-height: 1; text-transform: lowercase; cursor: pointer; border-radius: 0.25rem; transition: color 0.15s, background-color 0.15s; } .brave-shell-action:hover, .brave-shell-action:focus, .brave-shell-action:focus-visible { color: var(--aspire-text-primary); background: color-mix(in srgb, var(--aspire-text-primary), transparent 92%); outline: none; } .brave-shell-action:disabled { opacity: 0.5; cursor: default; } .brave-shell-action--primary { color: var(--aspire-primary); } .brave-shell-action--primary:hover, .brave-shell-action--primary:focus, .brave-shell-action--primary:focus-visible { color: var(--aspire-primary); background: color-mix(in srgb, var(--aspire-primary), transparent 88%); } html[data-bs-theme="brand"] .brave-shell-action { color: var(--brand-text-muted); } html[data-bs-theme="brand"] .brave-shell-action:hover, html[data-bs-theme="brand"] .brave-shell-action:focus, html[data-bs-theme="brand"] .brave-shell-action:focus-visible { color: var(--brand-text-idle); background: color-mix(in srgb, var(--brand-text-idle), transparent 90%); } html[data-bs-theme="brand"] .brave-shell-action--primary { color: var(--brand-accent); } html[data-bs-theme="brand"] .brave-shell-action--primary:hover, html[data-bs-theme="brand"] .brave-shell-action--primary:focus, html[data-bs-theme="brand"] .brave-shell-action--primary:focus-visible { color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent), transparent 85%); } /* ═══════════════════════════════════════════════════════════════════════════ * Plan 366 follow-up — neutralize floating/hover surfaces that read --rz-base-100 * directly. Under brand, --rz-base-100 is mapped to --aspire-brand-bg-input * (#4a1515) so any primitive that uses it as a *neutral* floating-surface fill * (sticky save bar, hovered row primitives) leaks burgundy. Same systemic fix * pattern as the autosave chip — override at the consumer class with the * monochrome --brand-surface-hover token. * ═══════════════════════════════════════════════════════════════════════════ */ /* ThemeFormStickyFooter — floating pill-shaped save bar. Not a brand surface. */ html[data-bs-theme="brand"] .theme-form-sticky-footer { background: var(--brand-surface-hover) !important; border-color: var(--aspire-brand-border) !important; } /* ThemeProfileListRow — hover state should be a neutral affordance, not burgundy. */ html[data-bs-theme="brand"] .theme-profile-list-row:hover { background: var(--brand-surface-hover) !important; }