/* ───────────────────────────────────────────────────────────────── Lens accent system — "know which hat you're wearing". The Deal Dashboard lens switcher sets data-lens on (JS interop in DealOsDashboard.razor). Everything below derives one variable, --lens-accent, that V3 surfaces use for their accent affordances. Color REINFORCES the lens label — it never replaces it; every lens-dependent affordance keeps its text. Roles without a dedicated --slyd-role-* token map to the nearest existing token (same mapping the Deal Room uses). ───────────────────────────────────────────────────────────────── */ :root { --lens-accent: var(--slyd-primary); --lens-accent-rgb: var(--slyd-primary-rgb, 99, 102, 241); } html[data-lens="buyer"] { --lens-accent: var(--slyd-role-buyer); --lens-accent-rgb: var(--slyd-role-buyer-rgb); } html[data-lens="operator"] { --lens-accent: var(--slyd-role-operator); --lens-accent-rgb: var(--slyd-role-operator-rgb); } html[data-lens="broker"] { --lens-accent: var(--slyd-role-broker); --lens-accent-rgb: var(--slyd-role-broker-rgb); } html[data-lens="offtakebuyer"] { --lens-accent: var(--slyd-accent-pink, var(--slyd-secondary)); } html[data-lens="lender"] { --lens-accent: var(--slyd-accent-purple, var(--slyd-secondary)); } html[data-lens="supplier"] { --lens-accent: var(--slyd-secondary); } /* ── Workspace affordances retinted while a specific lens is on ── (html without data-lens, or data-lens="all", keeps brand primary) */ html[data-lens]:not([data-lens="all"]) .nav-item.active { color: var(--lens-accent); box-shadow: inset 3px 0 0 var(--lens-accent); } html[data-lens]:not([data-lens="all"]) .nav-item.active i { color: var(--lens-accent); } html[data-lens]:not([data-lens="all"]) :focus-visible { outline-color: var(--lens-accent); } html[data-lens]:not([data-lens="all"]) ::selection { background: rgba(var(--lens-accent-rgb, 99, 102, 241), 0.35); } /* V3 page headline accent — .page-title is the V3 cockpit convention */ html[data-lens]:not([data-lens="all"]) .page-title { border-left: 3px solid var(--lens-accent); padding-left: 12px; transition: border-color 220ms ease; } /* Subtle ambient cue along the top of the workspace */ html[data-lens]:not([data-lens="all"]) body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lens-accent), transparent 70%); z-index: 1000; pointer-events: none; } @media (prefers-reduced-motion: reduce) { html[data-lens] .page-title { transition: none; } }