/* ============================================================ app.css — Recycler.IQ Simulator Console design tokens (RIQSIM-716/721) Dark mode is the DEFAULT, not a skin bolted on top (theming-handoff.md). The element carries data-theme="dark" | "light" (set pre-render by the boot script in App.razor from localStorage["riqsim.theme"], toggled at runtime via window.riqTheme in js/app.js). Every colour in the console resolves through a --c-* alias declared once here (:root + [data-theme="dark"]) — single place dark values live, no per-component palettes (the precedent this file has followed since RIQSIM-420). Compatibility: the old 27-token --riq-* system (RIQSIM-420) is still consumed by ~239 out-of-scope occurrences across Dashboard/MachineDetail/ SimulatorControlPanel/etc. (RIQSIM-716 exploration). Rather than touch every one of those files, the --riq-* names are redeclared below as var(--c-*) pointers in a single compat-bridge block, so old markup keeps compiling/flipping correctly until Phase B deletes it. NEW markup (TopBar, HostLinkLamp, ClockDisplay, ThemeSwitch, Fleet, Live) must use --c-* directly — never --riq-*. ============================================================ */ :root { color-scheme: light; /* ---- --c-* token table — LIGHT values (theming-handoff.md) ---- */ --c-app: #F4F7F9; /* page ground */ --c-card: #FFFFFF; /* card surface */ --c-sunken: #E9EEF2; /* table head / group */ --c-hover: #F4F7F9; /* row hover */ --c-border: #DCE3E8; /* hairline */ --c-border-soft: #F0F3F6; /* inner divider */ --c-border-strong: #C5D0D8; /* emphasised edge */ --c-track: #C5D0D8; /* slider / meter track */ --c-navy: #0B1F33; /* top bar, command bar, solid primary */ --c-navy-hover: #163149; /* its hover */ /* Solid primary button — distinct from chrome (on dark the chrome navy has no contrast against the app ground). */ --c-primary: #0B1F33; --c-primary-hover: #163149; --c-primary-border: transparent; --c-oninv: #F4F7F9; /* text on navy — never inverts */ --c-fg1: #0B1F33; /* text, strongest */ --c-fg2: #2A3B4A; --c-fg3: #5A6B78; --c-fg4: #8A99A6; /* text, faintest */ --c-teal: #1FA89C; /* product accent */ --c-teal-strong: #2EC4B6; --c-teal-deep: #137C72; /* INFERRED-free — AA ink step, see theming-handoff.md Provenance */ --c-teal-50: #EAF9F7; --c-teal-200: #9EDDD6; --c-green: #2F8F4F; /* success */ --c-green-50: #EDF6F0; --c-green-200: #A8CFB6; /* --c-amber is the DS --riq-warning; -deep is text ink on a warning tint (neutral, not a darker gold); the tints are the accent over the ground. */ --c-amber: #C28A0E; --c-amber-deep: #0B1F33; --c-amber-50: #FBF3E0; --c-amber-200: #E4CB90; /* --c-danger is the DS --riq-danger; -deep/-50..-200 are tint/ink steps for AA on tinted surfaces. */ --c-danger: #C03A3A; --c-danger-deep: #C03A3A; --c-danger-50: #FDF4F4; --c-danger-100: #FBEAEA; --c-danger-200: #F7E2E2; --c-danger-300: #DFA8A8; --c-blue: #184096; /* host/wire traffic */ --c-blue-50: #E7EEFA; --c-blue-200: #A9BEE6; --c-pop: rgba(255, 255, 255, .94); /* popover ground */ --c-scrim: rgba(11, 31, 51, .42); /* modal scrim */ /* Sensor-lamp pulse rings — consumed by @keyframes llLamp*. rgba(...) literals, never hex-alpha concatenation (theming-handoff.md rule 1). */ --c-glow-ok: rgba(31, 168, 156, .5); --c-glow-ok-0: rgba(31, 168, 156, 0); --c-glow-warn: rgba(194, 138, 14, .45); --c-glow-warn-0: rgba(194, 138, 14, 0); --c-glow-err: rgba(192, 58, 58, .45); --c-glow-err-0: rgba(192, 58, 58, 0); --c-art: none; /* filter for white-ground line art (light mode: no-op) */ /* Local design primitives — INFERRED. theming-handoff.md only specifies colour tokens; this repo deliberately doesn't import the shared _ds bundle (directive 8), so font/easing/light-shadow values are our own reasonable defaults, not sourced from the design system. Reconcile against a real webfont/easing token in a future ticket if tighter visual parity with the mockup is wanted. */ --font-body: 'DM Sans', sans-serif; /* INFERRED */ --font-display: 'DM Sans', sans-serif; /* INFERRED */ --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; /* INFERRED */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* INFERRED */ --shadow-1: 0 1px 2px rgba(11, 31, 51, .06); /* INFERRED (light) */ --shadow-2: 0 2px 6px rgba(11, 31, 51, .08); /* INFERRED (light) */ --shadow-3: 0 4px 12px rgba(11, 31, 51, .10); /* INFERRED (light) */ --shadow-4: 0 8px 24px rgba(11, 31, 51, .14); /* INFERRED (light) */ /* ---- Radzen theme override — map onto --c-* (flips per-mode) ---- */ --rz-primary: var(--c-primary); --rz-primary-dark: var(--c-primary-hover); --rz-primary-light: var(--c-border-strong); --rz-secondary: var(--c-border-strong); --rz-body-background-color: var(--c-app); --rz-text-color: var(--c-fg2); --rz-base-background-color: var(--c-card); /* ---- --riq-* → --c-* compat-bridge (RIQSIM-716) ---- Redeclares the 27 old RIQSIM-420 token names as var(--c-*) pointers so ~239 out-of-scope occurrences (Dashboard/MachineDetail/ SimulatorControlPanel/etc.) keep compiling and flipping without being touched until Phase B deletes them. No dark override needed — these inherit the flip from --c-*'s own [data-theme="dark"] block below. NEW markup must use --c-* directly, never these. */ --riq-deep-navy: var(--c-navy); --riq-dark-blue: var(--c-navy-hover); --riq-medium-blue: var(--c-teal); --riq-light-blue: var(--c-border-strong); --riq-pale-blue: var(--c-teal-50); --riq-body-text: var(--c-fg2); --riq-light-text: var(--c-fg3); --riq-strong-text: var(--c-fg1); --riq-bg-tint: var(--c-app); --riq-surface: var(--c-card); --riq-white: #FFFFFF; /* truly constant — unchanged */ /* --riq-accent-bg used to be pinned CONSTANT (old comment: "must not flip with --riq-medium-blue"). --c-primary already solves that contrast problem (theming-handoff.md), so it can now correctly flip per-mode — the old constraint is obsolete. */ --riq-accent-bg: var(--c-primary); --riq-on-accent: var(--c-oninv); --riq-on-navy: var(--c-oninv); --riq-on-soft: var(--c-fg1); --riq-success: var(--c-green); --riq-warning: var(--c-amber); --riq-danger: var(--c-danger); --riq-error: var(--riq-danger); /* canonical alias, unchanged */ --riq-success-soft: var(--c-green-50); /* No green-deep step exists on --c-* — approximation, note per Components table in architecture.md. */ --riq-success-strong: var(--c-green); --riq-warning-soft: var(--c-amber-50); --riq-warning-strong: var(--c-amber-deep); --riq-danger-soft: var(--c-danger-50); --riq-danger-strong: var(--c-danger-deep); --riq-log-bg: var(--c-sunken); --riq-border-strong: var(--c-border-strong); } /* ── Dark palette (RIQSIM-716/721, default) ────────────────────────────── --c-* dark values track the Recycler.IQ [data-theme="dark"] ramp in recycleriq/tokens.css so the console stays in step with the design system (theming-handoff.md). The --riq-* compat-bridge names are NOT redeclared here — they inherit the flip via var(--c-*) automatically. */ [data-theme="dark"] { color-scheme: dark; --c-app: #07172A; --c-card: #142A3D; --c-sunken: #0B1F33; --c-hover: #1B344A; --c-border: #1F3950; --c-border-soft: #17304A; --c-border-strong: #2E4862; --c-track: #284462; --c-navy: #04101F; --c-navy-hover: #1B344A; --c-primary: #1F3E58; --c-primary-hover: #2B516F; --c-primary-border: #4E7391; --c-oninv: #F4F7F9; --c-fg1: #F4F7F9; --c-fg2: #D7E0E8; --c-fg3: #A8B5C0; --c-fg4: #6F8090; --c-teal: #3FD0BF; --c-teal-strong: #3FD0BF; --c-teal-deep: #8FEBE4; --c-teal-50: #18324A; --c-teal-200: #2E6C63; --c-green: #4FCB6B; --c-green-50: #122A18; --c-green-200: #2F6B44; --c-amber: #E0A535; --c-amber-deep: #F4F7F9; --c-amber-50: rgba(224, 165, 53, .13); --c-amber-200: rgba(224, 165, 53, .42); --c-danger: #D85A5A; --c-danger-deep: #EE9B9B; --c-danger-50: rgba(216, 90, 90, .12); --c-danger-100: rgba(216, 90, 90, .16); --c-danger-200: rgba(216, 90, 90, .20); --c-danger-300: rgba(216, 90, 90, .42); --c-blue: #5C82E0; --c-blue-50: #15203A; --c-blue-200: #324E92; --c-pop: rgba(20, 42, 61, .97); --c-scrim: rgba(2, 9, 18, .62); --c-glow-ok: rgba(63, 208, 191, .9); --c-glow-ok-0: rgba(63, 208, 191, 0); --c-glow-warn: rgba(224, 165, 53, .85); --c-glow-warn-0: rgba(224, 165, 53, 0); --c-glow-err: rgba(216, 90, 90, .8); --c-glow-err-0: rgba(216, 90, 90, 0); /* KR10 chassis drawing is white-ground line art (data-art) — inverted so it doesn't glare on navy (theming-handoff.md rule 3). */ --c-art: invert(.92) hue-rotate(180deg); /* --shadow-1..4 re-declared at higher opacity — DS elevation is tuned for light ground and disappears on navy. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 2px 8px rgba(0, 0, 0, .40); --shadow-3: 0 6px 16px rgba(0, 0, 0, .45); --shadow-4: 0 12px 32px rgba(0, 0, 0, .55); /* Radzen base ramp — grids/inputs/dropdowns derive header, stripe, and well colors from --rz-base-N raw hex in default.css (NOT from the semantic vars above), so the ramp must be re-expressed here or DataGrid rows render light-on-light in dark mode. Re-expressed via var(--c-*) (architecture.md directive 3) rather than raw hex; some duplicate steps accepted (Radzen's 50-900 ramp is finer-grained than --c-*'s ~9 discrete stops). */ --rz-base: var(--c-border-strong); --rz-base-50: var(--c-card); --rz-base-100: var(--c-sunken); --rz-base-200: var(--c-hover); --rz-base-300: var(--c-border); --rz-base-400: var(--c-border-strong); --rz-base-500: var(--c-fg4); --rz-base-600: var(--c-fg4); --rz-base-700: var(--c-fg3); --rz-base-800: var(--c-fg2); --rz-base-900: var(--c-fg1); --rz-base-light: var(--c-hover); --rz-base-lighter: var(--c-sunken); --rz-base-dark: var(--c-fg4); --rz-base-darker: var(--c-fg1); --rz-on-base: var(--c-fg1); } /* ── Sensor-lamp pulse keyframes (RIQSIM-716) ────────────────────────── Ok/warn/err ring animations for the console's status lamps; consume the --c-glow-* stops declared above so they flip per-mode automatically. */ @keyframes llLamp { 0%, 100% { box-shadow: 0 0 0 0 var(--c-glow-ok); } 50% { box-shadow: 0 0 0 6px var(--c-glow-ok-0); } } @keyframes llLampWarn { 0%, 100% { box-shadow: 0 0 0 0 var(--c-glow-warn); } 50% { box-shadow: 0 0 0 6px var(--c-glow-warn-0); } } @keyframes llLampErr { 0%, 100% { box-shadow: 0 0 0 0 var(--c-glow-err); } 50% { box-shadow: 0 0 0 6px var(--c-glow-err-0); } } @keyframes llFlow { 0% { background-position: 0 0; } 100% { background-position: 24px 0; } } @keyframes llFade { from { opacity: 0; } to { opacity: 1; } } /* White-ground line art (KR10 chassis drawing, future service-manual art) picks up the per-mode invert filter (theming-handoff.md rule 3). */ img[data-art] { filter: var(--c-art); } html, body { font-family: var(--font-body); } body { background-color: var(--c-app); color: var(--c-fg2); } a, .btn-link { color: var(--c-teal); } .btn-primary { color: var(--c-oninv); background-color: var(--c-primary); border-color: var(--c-primary-border); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--c-card), 0 0 0 0.25rem var(--c-border-strong); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--c-green); } .invalid { outline: 1px solid var(--c-danger); } .validation-message { color: var(--c-danger); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: var(--c-border-strong); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }