/* ════════════════════════════════════════════════════════════════════ Ambolt design tokens — the single source of truth for colour, type and elevation across the ev- design system. Loaded FIRST of the app stylesheets (see App.razor). Everything else (entity-view.css, css/ev/components.css, scoped *.razor.css) consumes these variables and must not re-define them. White-labelling: App.razor injects per-brand values for the --brand-* variables into the document head (server-side, resolved from the request host — see the Login.razor precedent). Every primary/CTA token below derives from those two inputs, so a brand swap re-themes the whole app without touching component CSS. Dark mode: keyed on html[data-theme="dark"], stamped pre-paint by the inline boot script in App.razor and toggled at runtime by js/ev-theme.js. (The old .mud-theme-dark hook was never applied by MudBlazor — every rule scoped to it was dead code.) ════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Brand inputs (overridden per-brand from App.razor) ─────────── */ --brand-primary: #1e3a8a; --brand-secondary: #00897b; /* ── Typography / shape ─────────────────────────────────────────── */ --ev-font: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ev-radius: 12px; --ev-radius-sm: 8px; /* ── Z-scale (document any new layer here) ────────────────────────── app header 100 · dev toolbox 1100 · impersonation 1200 · search box 1299/1300 · dropdown 1310 · dialog 1400 · toast 1500 · reconnect modal 99999 */ --ev-z-dropdown: 1310; --ev-z-dialog: 1400; --ev-z-toast: 1500; /* ── Neutrals ────────────────────────────────────────────────────── */ --ev-surface: #ffffff; --ev-surface-2: #f8fafc; --ev-bg: #f9fafb; --ev-border: #e8ebf0; --ev-border-strong: #d6dae2; --ev-text: #1f2937; --ev-text-muted: #6b7280; --ev-text-soft: #9ca3af; /* ── Brand-derived ───────────────────────────────────────────────── */ --ev-primary: var(--brand-primary); --ev-primary-hover: color-mix(in srgb, var(--brand-primary) 82%, black); --ev-primary-soft: color-mix(in srgb, var(--brand-primary) 7%, white); --ev-primary-ring: color-mix(in srgb, var(--brand-primary) 14%, transparent); --ev-cta: var(--brand-secondary); --ev-cta-hover: color-mix(in srgb, var(--brand-secondary) 85%, black); /* ── Status ──────────────────────────────────────────────────────── */ --ev-danger: #dc2626; --ev-danger-soft: rgba(239, 68, 68, 0.1); --ev-warn: #b45309; --ev-warn-soft: rgba(245, 158, 11, 0.13); --ev-success: #047857; --ev-success-soft: rgba(0, 137, 123, 0.12); --ev-violet: #7c3aed; --ev-violet-soft: rgba(124, 58, 237, 0.12); /* ── Elevation ───────────────────────────────────────────────────── */ --ev-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05); --ev-shadow-pop: 0 12px 34px rgba(15, 23, 42, 0.16); /* ── MudBlazor palette bridge ───────────────────────────────────── While MudThemeProvider is still rendered its own inline