/*
* Datixxia governed visual value set — the single source PRS-1 requires every surface to draw
* from. Source of truth for the values below: designer sheet "Light theme tokens — Datixxia
* (v1, AA-checked)", 19.08.2026 (docs/design/figma/). This file is the technical *expression*
* of that sheet, not a second copy invented independently — see openspec/changes/
* apply-brand-ui-system/design.md (NG6, D1).
*
* THREE TIERS. Read this before adding a rule anywhere in the product:
*
* 1. PRIMITIVE (--dtx-color-*, --dtx-space-*, --dtx-radius-*, --dtx-type-*, --dtx-motion-*,
* --dtx-elevation-*) — transcribed from the sheet. Declared once. NEVER referenced directly
* by a component or a page stylesheet.
* 2. ROLE (--dtx-surface-*, --dtx-text-*, --dtx-border-*, --dtx-focus-ring, --dtx-btn-*,
* --dtx-chart-*) — the only tier components and pages may reference. A role resolves to a
* primitive, and which primitive it resolves to changes with the surface context (tier 2b
* below). If a value you need has no role token, that is a gap in the set (PRS-1's second
* scenario) — add the role here, sourced from an existing or newly-published primitive.
* Do NOT reach for a primitive or a literal to route around a missing role.
* 3. BRIDGE (--mud-palette-*, --sk-shell-*, --onb-*) — exists ONLY so pre-existing
* selectors (MudBlazor, app.css, onboarding.css) keep working while they still carry their
* original variable names. Never grow this tier for new code; new code uses tier 2 directly.
*
* SURFACE CONTEXT (tier 2b): three contexts redefine the ROLE tier only, never the primitives —
* `:root` (light, default), `.dtx-on-overlay` (a dark surface inside an otherwise light context:
* tooltip, popover, dark KPI card), `.dtx-on-dark` (a fully dark context: embedded dashboard
* views). A role token resolves differently depending which of these contexts it inherits from,
* which is what stops a light "muted grey" from leaking into a dark tooltip (PRS-3).
*/
:root {
/* ======================================================================
1. PRIMITIVE TIER — transcribed from the sheet. Do not reference these
directly from component or page CSS; go through the role tier (below).
====================================================================== */
/* --- Surfaces (sheet §1) --- */
--dtx-color-canvas: #F5F7F8;
--dtx-color-surface: #FFFFFF;
--dtx-color-surface-sunken: #EFF3F6;
--dtx-color-overlay: #1E2836;
/* --- Borders & focus (sheet §2) --- */
--dtx-color-divider: #E3E7EA;
--dtx-color-control-border: #767E87;
--dtx-color-focus-ring: #27509E;
/* --- Text (sheet §3) --- */
--dtx-color-text-primary: #0D1117;
--dtx-color-text-secondary: #4A525C;
--dtx-color-text-muted: #6B727A;
--dtx-color-text-muted-on-dark: #9AA5B1;
--dtx-color-text-on-dark: #FFFFFF;
/* --- Buttons (sheet §4) --- */
--dtx-color-btn-primary-rest: #27509E;
--dtx-color-btn-primary-hover: #1E3F7D;
--dtx-color-btn-primary-pressed: #17325F;
--dtx-color-btn-action-rest: #2F7A28;
--dtx-color-btn-action-hover: #2A6F24;
--dtx-color-btn-action-pressed: #256320;
--dtx-color-btn-destructive: #C4342F;
--dtx-color-btn-destructive-hover-bg: #FBEFEE;
--dtx-color-btn-secondary-rest: #FFFFFF;
--dtx-color-btn-secondary-hover: #F1F5F8;
--dtx-color-btn-secondary-pressed: #E6ECF1;
--dtx-color-btn-disabled-bg: #EFF2F5;
--dtx-color-btn-disabled-text: #AEB8C2;
--dtx-color-btn-label-on-fill: #FFFFFF;
/* --- Charts, light theme (sheet §5) --- */
--dtx-color-chart-fact: #379030;
--dtx-color-chart-comparison: #17325F;
--dtx-color-chart-other: #7F8A95;
--dtx-color-chart-grid: #EDF1F4;
--dtx-color-chart-axis: #6B727A;
/* Categorical ramp — CONSUME IN PUBLISHED ORDER ONLY. Steps 2/4/6 are large-fill entries
(>=2px separator required between adjacent bands); steps 1/3/5 are thin-mark entries
(lines, small bars, dots). Cherry-picking out of order reproduces the sliding-series
defect the sheet's own review found (steps 2/4/6 sit 1.07-1.16 apart from each other). */
--dtx-color-chart-ramp-1: #17325F; /* navy — thin mark */
--dtx-color-chart-ramp-2: #8FB6E8; /* sky — large fill only */
--dtx-color-chart-ramp-3: #0F6F7F; /* teal — thin mark */
--dtx-color-chart-ramp-4: #E3B168; /* amber — large fill only */
--dtx-color-chart-ramp-5: #2F7A28; /* green — thin mark */
--dtx-color-chart-ramp-6: #B9C2CB; /* slate — large fill only */
/* --- Semantic (sheet §6) --- */
--dtx-color-success: #2F7A28;
--dtx-color-warning: #A66100;
--dtx-color-error: #C4342F;
--dtx-color-brand-green: #42AA39; /* never as a fill behind white text */
/* --- Dark theme / embedded dashboard views (sheet §7) --- */
--dtx-color-dark-base: #0A0E13;
--dtx-color-dark-surface: #161B22;
--dtx-color-dark-border: #3D444D;
--dtx-color-dark-text: #FFFFFF;
--dtx-color-dark-text-secondary: #BABBBD;
--dtx-color-dark-text-muted: #8B949E;
--dtx-color-dark-chart-fact: #42AA39;
--dtx-color-dark-chart-comparison: #74D1FF;
/* --- Sidebar (Figma file fBgmihOmcXtwIrYGKNOI37, node 1:29 "Sidebar", read via the Figma REST
API 2026-08-25) --- own frame fill, a flat solid colour, not a gradient - the visible
top-to-bottom colour shift is entirely two separate blurred glow shapes (nodes 1:30/1:31)
layered on top, not a base gradient. Close to --dtx-color-dark-base but a distinct value from
a distinct source (that one is the dark-theme/embedded-dashboard sheet, §7 above); kept apart
rather than conflated just because they're similar. */
--dtx-color-sidebar-base: #0F1620;
/* --- Sizes, spacing, radius (sheet "Sizes" line) --- */
--dtx-control-height-default: 40px;
--dtx-control-height-dense: 32px;
--dtx-control-height-login: 48px;
--dtx-radius: 10px;
--dtx-focus-ring-width: 2px;
/* 0, not a gap (was 2px): a positive offset draws the ring detached from the control's own
border with a visible gap, which on an already-bordered control (an outlined text field,
an active tab's own border) reads as two concentric rectangles rather than one clean frame -
confirmed by a live side-by-side comparison against offset 0/-2px/thinner-width variants.
0 lets the ring sit flush against the control's edge for a single crisp outline everywhere,
while staying exactly as wide (2px) and as visible (PRS-5's 3:1 floor is about colour
contrast, not gap, so this doesn't reduce visibility). */
--dtx-focus-ring-offset: 0px;
--dtx-space-1: 4px;
--dtx-space-2: 8px;
--dtx-space-3: 12px;
--dtx-space-4: 16px;
--dtx-space-5: 20px;
--dtx-space-6: 24px;
--dtx-space-8: 32px;
--dtx-space-10: 40px;
--dtx-space-12: 48px;
--dtx-space-16: 64px;
/*
* --- Type scale, motion durations, elevation (DERIVED — not published by the sheet) ---
*
* design.md D1/Q5: the sheet covers colour, focus, control heights, radius and the 8px grid
* in full, but does not publish a type scale, motion durations, or the two elevation values
* review item 15 itself asks for. Decided 2026-08-24 by the BA (Q5): derive these from the
* designer's own direction mock-ups and implement immediately, no confirmation round —
* ratified at her QA pass rather than before. Derivation record (task 1.12):
*
* - Type scale: read off docs/design/figma/Dashboard state 1 Datixxia Console.png and
* Roles and Permissions.png. The page title ("Overview") measures roughly 38-40px cap
* height at native resolution against ~14px for its subtitle; the KPI stat value
* ("Tixx8,034,610,792") sits between the two at roughly 28px; card titles ("Fact
* NetTixx", "Permissions for role Platform Admin" is larger at ~24px) and nav labels
* read close to 16px; uppercase micro-labels ("HOVER STATE", section eyebrows) read
* close to 12px. Rounded to a conventional scale.
* - Motion durations: NOT invented — read off the transitions already shipping in
* app.css (0.16s hover chips, 0.2-0.22s drawer/nav motion, 0.3-0.4s panel slides),
* which already match the mock-ups' snappy, non-decorative micro-interactions.
* Formalised as three named steps instead of the ad-hoc per-selector values.
* - Elevation: review item 15 asks for exactly two levels tied to the surface, not to
* ad-hoc per-card shadows (today: feature cards, the profile card, and dashboard cards
* each carry a different shadow). Level 1 (card, at rest) is a thin border plus a
* barely-visible shadow, matching the KPI cards in the mock-ups; level 2 (floating —
* tooltip, popover, dropdown, modal) is a stronger, borderless shadow, matching the
* dark tooltip overlay. No further levels, per review item 15.
*/
--dtx-type-2xs: 500 12px/1.4 var(--dtx-font-family); /* uppercase micro-labels, badges */
--dtx-type-xs: 400 13px/1.5 var(--dtx-font-family); /* secondary / meta text */
--dtx-type-sm: 400 14px/1.5 var(--dtx-font-family); /* body default */
--dtx-type-md: 600 16px/1.3 var(--dtx-font-family); /* card titles, nav labels */
--dtx-type-lg: 600 20px/1.3 var(--dtx-font-family); /* dialog / section headings */
--dtx-type-xl: 700 24px/1.25 var(--dtx-font-family); /* sub-page headings */
--dtx-type-display-sm: 700 28px/1.2 var(--dtx-font-family); /* KPI stat values */
--dtx-type-display-lg: 700 32px/1.2 var(--dtx-font-family); /* page H1 title */
--dtx-motion-fast: 120ms;
--dtx-motion-base: 200ms;
--dtx-motion-slow: 320ms;
--dtx-motion-easing: cubic-bezier(.2, 0, 0, 1);
--dtx-elevation-1: 0 1px 2px rgba(13, 17, 23, .06);
--dtx-elevation-1-border: 1px solid var(--dtx-color-divider);
--dtx-elevation-2: 0 12px 32px rgba(13, 17, 23, .18);
--dtx-color-scrim: rgba(13, 17, 23, .45);
--dtx-font-family: "Afacad", "Segoe UI", system-ui, sans-serif;
/* ======================================================================
2. ROLE TIER — the only tier components/pages may reference. Resolves
against the LIGHT surface context by default (this block).
====================================================================== */
--dtx-surface-canvas: var(--dtx-color-canvas);
--dtx-surface-card: var(--dtx-color-surface);
--dtx-surface-sunken: var(--dtx-color-surface-sunken);
--dtx-text-heading: var(--dtx-color-text-primary);
--dtx-text-body: var(--dtx-color-text-primary);
--dtx-text-secondary: var(--dtx-color-text-secondary);
--dtx-text-muted: var(--dtx-color-text-muted);
--dtx-text-on-fill: var(--dtx-color-btn-label-on-fill);
--dtx-text-disabled: var(--dtx-color-btn-disabled-text);
--dtx-border-divider: var(--dtx-color-divider); /* decorative only, no contrast floor */
--dtx-border-control: var(--dtx-color-control-border);
--dtx-focus-ring: var(--dtx-focus-ring-width) solid var(--dtx-color-focus-ring);
--dtx-elevation-card: var(--dtx-elevation-1);
--dtx-elevation-card-border: var(--dtx-elevation-1-border);
--dtx-elevation-floating: var(--dtx-elevation-2);
--dtx-overlay-scrim: var(--dtx-color-scrim);
/* Button roles: PRS-4. Destructive is unfilled at rest by construction — there is no
"--dtx-btn-destructive-bg-rest" role, only a hover/pressed fill. */
--dtx-btn-primary-bg: var(--dtx-color-btn-primary-rest);
--dtx-btn-primary-bg-hover: var(--dtx-color-btn-primary-hover);
--dtx-btn-primary-bg-pressed: var(--dtx-color-btn-primary-pressed);
--dtx-btn-action-bg: var(--dtx-color-btn-action-rest);
--dtx-btn-action-bg-hover: var(--dtx-color-btn-action-hover);
--dtx-btn-action-bg-pressed: var(--dtx-color-btn-action-pressed);
--dtx-btn-destructive-text: var(--dtx-color-btn-destructive);
--dtx-btn-destructive-border: var(--dtx-color-btn-destructive);
--dtx-btn-destructive-bg-hover: var(--dtx-color-btn-destructive-hover-bg);
--dtx-btn-destructive-bg-pressed: var(--dtx-color-btn-destructive);
--dtx-btn-secondary-bg: var(--dtx-color-btn-secondary-rest);
--dtx-btn-secondary-bg-hover: var(--dtx-color-btn-secondary-hover);
--dtx-btn-secondary-bg-pressed: var(--dtx-color-btn-secondary-pressed);
--dtx-btn-secondary-border: var(--dtx-color-control-border);
--dtx-btn-secondary-text: var(--dtx-color-text-primary);
--dtx-btn-disabled-bg: var(--dtx-color-btn-disabled-bg);
--dtx-btn-disabled-text: var(--dtx-color-btn-disabled-text);
--dtx-btn-disabled-border: #DFE4E9;
--dtx-chart-fact: var(--dtx-color-chart-fact);
--dtx-chart-comparison: var(--dtx-color-chart-comparison);
--dtx-chart-other: var(--dtx-color-chart-other);
--dtx-chart-grid: var(--dtx-color-chart-grid);
--dtx-chart-axis: var(--dtx-color-chart-axis);
--dtx-success: var(--dtx-color-success);
--dtx-warning: var(--dtx-color-warning);
--dtx-error: var(--dtx-color-error);
/* Traceability: PRS-1 openspec/specs/presentation/spec.md (Single governed set of visual values) */
--dtx-status-trial: var(--dtx-color-brand-green);
--dtx-status-attention: var(--dtx-color-warning);
--dtx-status-blocked: var(--dtx-color-error);
}
/* ==========================================================================
2b. SURFACE CONTEXTS — redefine the ROLE tier only, never the primitives
(PRS-3). A component inside one of these containers resolves its role
tokens to the values below purely by CSS inheritance; it need not know it
is inside a tooltip or a dark dashboard.
========================================================================== */
/* A dark surface presented within an otherwise light context: tooltip, popover, dark KPI card. */
.dtx-on-overlay {
--dtx-surface-canvas: var(--dtx-color-overlay);
--dtx-surface-card: var(--dtx-color-overlay);
--dtx-surface-sunken: var(--dtx-color-overlay);
--dtx-text-heading: var(--dtx-color-text-on-dark);
--dtx-text-body: var(--dtx-color-text-on-dark);
--dtx-text-secondary: var(--dtx-color-text-muted-on-dark);
--dtx-text-muted: var(--dtx-color-text-muted-on-dark);
--dtx-border-divider: color-mix(in srgb, var(--dtx-color-text-on-dark) 12%, transparent);
--dtx-border-control: var(--dtx-color-text-muted-on-dark);
--dtx-chart-axis: var(--dtx-color-text-muted-on-dark);
--dtx-focus-ring: var(--dtx-focus-ring-width) solid var(--dtx-color-text-on-dark);
color: var(--dtx-text-body);
background: var(--dtx-surface-card);
}
/* A fully dark context: embedded dashboard views. */
.dtx-on-dark {
--dtx-surface-canvas: var(--dtx-color-dark-base);
--dtx-surface-card: var(--dtx-color-dark-surface);
--dtx-surface-sunken: var(--dtx-color-dark-surface);
--dtx-text-heading: var(--dtx-color-dark-text);
--dtx-text-body: var(--dtx-color-dark-text);
--dtx-text-secondary: var(--dtx-color-dark-text-secondary);
--dtx-text-muted: var(--dtx-color-dark-text-muted);
--dtx-border-divider: var(--dtx-color-dark-border);
--dtx-border-control: var(--dtx-color-dark-border);
--dtx-chart-fact: var(--dtx-color-dark-chart-fact);
--dtx-chart-comparison: var(--dtx-color-dark-chart-comparison);
--dtx-chart-axis: var(--dtx-color-dark-text-muted);
--dtx-focus-ring: var(--dtx-focus-ring-width) solid var(--dtx-color-text-on-dark);
color: var(--dtx-text-body);
background: var(--dtx-surface-canvas);
}
/* The product's dark chrome predates the two context classes above and cannot simply adopt them:
these containers set their own brand background and would have their surface/text roles
overwritten. They are still dark surfaces, so the focus ring must flip on them for the same
PRS-5 reason (navy-on-navy is 2.36:1 in the drawer, 2.51:1 in the top bar). Ring only, nothing
else, so the shell's own bridge-tier styling is untouched.
.dtx-rail is deliberately NOT in this list (bug 82): unlike the drawer/top bar, its own
background (theme.css) resolves to --dtx-surface-card - a light surface, never wrapped in
.dtx-on-dark. Forcing the ring to white here put a white ring on a white background
(~1:1 contrast). It uses the base :focus-visible rule below instead, which clears 3:1 there. */
.app-navigation-drawer,
.app-topbar {
--dtx-focus-ring: var(--dtx-focus-ring-width) solid var(--dtx-color-text-on-dark);
}
/* ==========================================================================
3. BRIDGE TIER — existing selectors only. Do not extend for new code.
========================================================================== */
/* Declared under `html:root` (specificity 0-1-1), NOT bare `:root` (0-1-0). MudThemeProvider
emits its own `:root{--mud-palette-*}` block at runtime from inside the InteractiveShell
island, i.e. AFTER anything in . This selector is what wins regardless of document
order or whether the circuit has started yet (design.md D2) — do not "simplify" this back to
`:root`, that reintroduces the load-order dependency this file exists to remove. */
html:root {
/* Right rail width (Figma node 9:1842). Declared globally, not on .sk-shell, because the rail
itself renders outside .sk-shell (InteractiveShell's own island) but app.css's .sk-shell
still needs the same value to reserve the space. */
--sk-rail-width: 72px;
--mud-palette-appbar-background: var(--dtx-color-dark-base);
--mud-palette-primary: var(--dtx-btn-primary-bg);
--mud-palette-primary-darken: var(--dtx-btn-primary-bg-pressed);
--mud-palette-primary-lighten: var(--dtx-btn-primary-bg-hover);
--mud-palette-primary-text: var(--dtx-text-on-fill);
--mud-palette-text-primary: var(--dtx-text-heading);
--mud-palette-secondary: var(--dtx-btn-secondary-text);
--mud-palette-secondary-darken: var(--dtx-color-text-primary);
--mud-palette-secondary-lighten: var(--dtx-color-text-secondary);
--mud-palette-secondary-text: var(--dtx-text-on-fill);
--mud-palette-tertiary: var(--dtx-btn-action-bg);
--mud-palette-tertiary-darken: var(--dtx-btn-action-bg-pressed);
--mud-palette-tertiary-lighten: var(--dtx-btn-action-bg-hover);
--mud-palette-tertiary-text: var(--dtx-text-on-fill);
--mud-palette-text-secondary: var(--dtx-text-secondary);
/* --- The -rgb and -hover companions (see below: these are NOT optional) ---
*
* MudBlazor composes translucent values itself, e.g.
* .mud-button-outlined-primary { border: 1px solid rgba(var(--mud-palette-primary-rgb), …) }
* .mud-button-text-primary:hover { background-color: var(--mud-palette-primary-hover) }
* Overriding --mud-palette-primary alone does NOT reach either of those: MudBlazor.min.css
* declares neither, they are emitted at runtime by from its DEFAULT palette.
* Without the companions below, an outlined Color.Primary button rendered brand navy text inside
* a #594AE2 PURPLE border (live on /Partner and /Manage/Subscription), and Secondary/Tertiary
* fell back to MudBlazor's stock pink/teal the same way.
*
* The -rgb entries must be a bare "R, G, B" triplet, because that is the only form rgba() accepts
* as a substituted argument — no CSS function derives a triplet from a hex custom property, so
* these are the one place the set is transcribed rather than referenced. They are not a second
* source of truth: BridgePaletteTests asserts each triplet still equals the hex of the primitive
* named in its comment, so a palette edit that forgets one fails the build. */
--mud-palette-primary-rgb: 39, 80, 158; /* --dtx-color-btn-primary-rest #27509E */
--mud-palette-secondary-rgb: 13, 17, 23; /* --dtx-color-text-primary #0D1117 */
--mud-palette-tertiary-rgb: 47, 122, 40; /* --dtx-color-btn-action-rest #2F7A28 */
--mud-palette-error-rgb: 196, 52, 47; /* --dtx-color-error #C4342F */
--mud-palette-success-rgb: 47, 122, 40; /* --dtx-color-success #2F7A28 */
--mud-palette-warning-rgb: 166, 97, 0; /* --dtx-color-warning #A66100 */
--mud-palette-info-rgb: 39, 80, 158; /* --dtx-color-btn-primary-rest #27509E */
--mud-palette-text-primary-rgb: 13, 17, 23; /* --dtx-color-text-primary #0D1117 */
/* The hover companions stay derived (color-mix on a role token), so only the -rgb block above
carries transcribed channels. 6% matches MudBlazor's own hover opacity for these slots. */
--mud-palette-primary-hover: color-mix(in srgb, var(--dtx-btn-primary-bg) 6%, transparent);
--mud-palette-secondary-hover: color-mix(in srgb, var(--dtx-btn-secondary-text) 6%, transparent);
--mud-palette-tertiary-hover: color-mix(in srgb, var(--dtx-btn-action-bg) 6%, transparent);
--mud-palette-error-hover: color-mix(in srgb, var(--dtx-error) 6%, transparent);
--mud-palette-success-hover: color-mix(in srgb, var(--dtx-success) 6%, transparent);
--mud-palette-warning-hover: color-mix(in srgb, var(--dtx-warning) 6%, transparent);
--mud-palette-info-hover: color-mix(in srgb, var(--dtx-btn-primary-bg) 6%, transparent);
--mud-typography-default-family: var(--dtx-font-family);
--mud-typography-default-size: 14px;
--mud-typography-button-family: var(--dtx-font-family);
--mud-typography-button-size: 14px;
--mud-typography-button-weight: 600;
--mud-typography-h2-family: var(--dtx-font-family);
--mud-typography-h2-size: 32px;
--mud-typography-h2-weight: 700;
--mud-typography-h4-family: var(--dtx-font-family);
--mud-typography-h4-size: 20px;
--mud-typography-h4-weight: 600;
/* MudBlazor gives every named Typo variant (h1/h3/h5/h6, subtitle1/2, body1/2, caption,
overline) its OWN -family variable, independent of --mud-typography-default-family - only
the four above had been overridden, so anything rendered as one of these (MudDataGrid/
MudTable cells use body2/subtitle2, per DevTools) silently fell back to MudBlazor's built-in
Roboto instead of the brand font. */
--mud-typography-h1-family: var(--dtx-font-family);
--mud-typography-h3-family: var(--dtx-font-family);
--mud-typography-h5-family: var(--dtx-font-family);
--mud-typography-h6-family: var(--dtx-font-family);
--mud-typography-subtitle1-family: var(--dtx-font-family);
--mud-typography-subtitle2-family: var(--dtx-font-family);
--mud-typography-body1-family: var(--dtx-font-family);
--mud-typography-body2-family: var(--dtx-font-family);
--mud-typography-caption-family: var(--dtx-font-family);
--mud-typography-overline-family: var(--dtx-font-family);
--mud-palette-info: var(--dtx-btn-primary-bg);
--mud-palette-success: var(--dtx-success);
--mud-palette-warning: var(--dtx-warning);
--mud-palette-error: var(--dtx-error);
--mud-default-borderradius: var(--dtx-radius);
/* app.css / NavMenu.razor.css shell bridge. Figma node 1:29 "Sidebar" (read via the Figma REST
API 2026-08-25, PAT-authenticated) confirmed this frame's own fill is FLAT - the sidebar is
not a black-to-green gradient at all. The visible top/bottom colour shift is two separate
blurred glow shapes (nodes 1:30/1:31) layered over this flat base - see NavMenu.razor.css's
::before/::after, and --sk-shell-glow-* just below sourced from those same two nodes. An
earlier pass (kept in git history) treated this as a linear-gradient base instead and kept
tuning the wrong two stops - that read as "too green" precisely because it was inventing a
gradient the mock-up never had. */
--sk-shell-bg: var(--dtx-color-sidebar-base);
--sk-shell-bg-soft: var(--dtx-color-dark-surface);
/* The two glow shapes' own gradient (nodes 1:30/1:31): identical green-to-blue linear gradient,
31% opacity, 140px blur, one bottom-left, one top-right. Reused as-is by NavMenu.razor.css's
::before/::after. */
--sk-shell-glow-from: var(--dtx-color-brand-green);
--sk-shell-glow-to: var(--dtx-color-btn-primary-rest);
--sk-shell-glow-opacity: 0.31;
/* A dark-to-brand-green diagonal, for surfaces that want the shell's dark identity but have no
mock-up of their own to source an exact recipe from (profile-header "Edit" banners, the chat
welcome card) - not a stand-in for the sidebar's own background above. */
--dtx-gradient-shell: linear-gradient(120deg, var(--sk-shell-bg) 0%, color-mix(in srgb, var(--sk-shell-bg) 70%, var(--dtx-color-brand-green) 30%) 100%);
--sk-shell-topbar-bg: var(--dtx-color-dark-base);
--sk-shell-topbar-shadow: var(--dtx-elevation-floating);
--sk-shell-drawer-shadow: var(--dtx-elevation-floating);
--sk-shell-accent: var(--dtx-color-brand-green);
--sk-shell-accent-muted: var(--dtx-color-dark-chart-comparison);
--sk-shell-text: var(--dtx-color-dark-text);
--sk-shell-text-soft: var(--dtx-color-dark-text-secondary);
--sk-shell-text-muted: var(--dtx-color-dark-text-muted);
--sk-shell-icon-muted: var(--dtx-color-dark-text-muted);
--sk-shell-border: var(--dtx-color-dark-border);
--sk-shell-border-strong: var(--dtx-color-dark-border);
--sk-shell-hover-bg: rgba(255, 255, 255, .08);
/* Figma node 1:61 ("Dashboard", active): solid pill fill rgba(25,33,44) - the same tone as
--sk-shell-bg-soft, not a translucent green wash. */
--sk-shell-active-bg: var(--sk-shell-bg-soft);
--sk-shell-active-bg-transparent: rgba(66, 170, 57, 0);
--sk-shell-action-bg: rgba(255, 255, 255, .05);
--sk-shell-action-border: var(--dtx-color-dark-border);
--sk-shell-action-hover-border: var(--dtx-color-brand-green);
--sk-shell-action-hover-bg: rgba(66, 170, 57, .12);
--sk-shell-brand-shadow: var(--dtx-elevation-floating);
/* Login page bridge */
/* No Figma mock-up exists for the sign-in screen (only Dashboard state 1/2 and Roles and
Permissions were designed) - these incorporate the brand's green->blue gradient (the Color
Palette page's own banner) rather than a verified pixel match. */
--sk-login-page-radial-bg: radial-gradient(circle at top left, color-mix(in srgb, var(--dtx-color-brand-green) 14%, transparent), transparent 34%);
--sk-login-page-gradient-bg: linear-gradient(135deg, color-mix(in srgb, var(--dtx-color-dark-base) 8%, transparent), color-mix(in srgb, var(--dtx-btn-primary-bg) 10%, transparent));
--sk-login-surface: var(--dtx-color-surface);
--sk-login-shell-shadow: var(--dtx-elevation-floating);
--sk-login-panel-grid-line: rgba(255, 255, 255, .08);
--sk-login-panel-grid-mask: linear-gradient(180deg, rgba(0, 0, 0, .72), transparent);
--sk-login-text-inverse: var(--dtx-color-dark-text);
--sk-login-text-inverse-soft: var(--dtx-color-dark-text-secondary);
--sk-login-text-strong: var(--dtx-color-text-primary);
--sk-login-text-muted: var(--dtx-color-text-secondary);
--sk-login-option-text: var(--dtx-color-text-secondary);
--sk-login-divider-text: var(--dtx-color-text-muted);
--sk-login-divider-line: var(--dtx-color-divider);
--sk-login-accent: var(--dtx-color-btn-primary-rest);
--sk-login-accent-muted: var(--dtx-color-brand-green);
--sk-login-link: var(--dtx-color-btn-primary-rest);
--sk-login-submit-bg: var(--dtx-btn-primary-bg);
--sk-login-submit-text: var(--dtx-text-on-fill);
--sk-login-submit-shadow: var(--dtx-elevation-floating);
/* Onboarding wizard bridge (onboarding.css's own private --onb-* scale) */
--onb-accent: var(--dtx-btn-primary-bg);
--onb-accent-text: var(--dtx-text-on-fill);
--onb-radius: var(--dtx-radius);
--onb-border: var(--dtx-color-divider);
--onb-text: var(--dtx-color-text-primary);
--onb-muted: var(--dtx-color-text-muted);
}
/* ==========================================================================
4. FOCUS — one rule, PRS-5. No surface may suppress this; no per-component
variant exists. `:focus-visible` (not `:focus`) so a mouse click does not
leave a ring behind.
The rule reads the ROLE token, not the primitive: PRS-5 requires the ring to
clear 3:1 against "the surface behind it", and the navy primitive clears it
only on light surfaces (7.17:1 on canvas, but 2.36:1 on the sidebar and
2.51:1 on the top bar). Reading the role lets every dark surface below
re-point it, the same way the text and border roles already flip.
!important on both declarations (bug 82): MudBlazor's own bundled
MudBlazor.min.css resets the outline to nothing for anchors on the
focus-visible pseudo-class and for buttons on plain focus - both at
selector specificity (0,1,1), strictly higher than this bare pseudo-class
selector's (0,1,0). CSS resolves conflicting declarations by specificity
first, not by order, so without !important that bundled reset
silently won on every native anchor/button regardless of this file loading
before or after it in App.razor's head - the ring was inert on nav links
and plain buttons site-wide. That stylesheet ships inside a NuGet package
and never lands under src/, so no repo-local rule change can out-specify
it - !important is the only lever available here.
========================================================================== */
:focus-visible {
outline: var(--dtx-focus-ring) !important;
outline-offset: var(--dtx-focus-ring-offset) !important;
}