/* ============================================================================ Seafar Design System — tokens & theme contract for Blackbox ---------------------------------------------------------------------------- This file MUST be the first stylesheet linked in index.html. It establishes the cascade layer order, imports Radzen's material-base sheet into the lowest layer, and defines every design token for BOTH themes: dark (default) — Seafar "Command Center": navy ground, cyan accent light (toggle) — Seafar product theme: white cards, teal accent Theme switching: , set by the inline boot script in index.html (localStorage 'bb-theme', default dark) and toggled from the header button via blackbox.js. Token tiers: T1 primitives — raw scales, theme-independent (:root) T2 semantic aliases — the ONLY tokens component CSS may consume. Dark values on :root, light on html[data-theme="light"]. T3 bridges — --rz-* (Radzen), legacy --blackbox- and --bb- aliases, chart tokens (names frozen, values per theme). Radzen note: written against Radzen.Blazor 10.4.7. The "generated" dark block below mirrors material-dark-base.css definitions with Radzen's grey / purple palette substituted for Seafar navy/cyan — regenerate on upgrade. ============================================================================ */ /* Layer order. `reset` MUST precede `radzen`: the element-level preflight reset (button/input padding, universal border) would otherwise beat Radzen's class rules outright, since layer order ignores specificity. */ @layer reset, radzen, tokens, base, radzen-overrides, components, pages, responsive; @import url("../_content/Radzen.Blazor/css/material-base.css") layer(radzen); @layer tokens { /* ------------------------------------------------------------------ */ /* T1 — primitives (theme-independent) */ /* ------------------------------------------------------------------ */ :root { /* Teal scale (light-theme brand) */ --teal-50: #F3FFF3; --teal-100: #E0F1EF; --teal-200: #BFE0DD; --teal-300: #8CB0A9; --teal-400: #51A7AF; --teal-500: #009999; --teal-600: #008A8A; --teal-700: #008080; --teal-800: #006666; --teal-900: #004C4C; --brand-teal: #30656C; /* Ink / cool neutral scale (light theme) */ --ink-50: #F5FAF8; --ink-100: #ECF3F1; --ink-200: #DDE7E5; --ink-300: #B9C7C8; --ink-400: #8CA3A6; --ink-500: #6B898D; --ink-600: #46656A; --ink-700: #2C4A4F; --ink-800: #143238; --ink-900: #0B2227; /* Navy ground + cyan accent (dark "Command Center" theme) */ --navy-0: #04101A; --navy-1: #07151F; --navy-2: #0A1D2A; --cmd-panel: #0C2230; --cmd-panel-2: #0E2735; --cmd-panel-3: #102A38; --cyan-bright: #5EF0EC; --cyan: #2ED3D3; --cyan-dim: #19A3A3; --cyan-deep: #0D6E72; /* Typography */ --font-sans: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: "Good Times", "Inter", system-ui, sans-serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; /* Spacing — 4px grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Motion */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0, 0.1, 1); /* Layout */ --container-max: 1460px; /* app is data-dense; wider than DS marketing 1200px */ --radius-pill: 999px; --header-h: 72px; /* updated per breakpoint in @layer responsive */ --timeline-clearance: 7rem; /* app-main bottom padding clearing the fixed replay bar */ } /* ------------------------------------------------------------------ */ /* T2 — semantic aliases: DARK (default theme) */ /* ------------------------------------------------------------------ */ :root { color-scheme: dark; --color-primary: var(--cyan); --color-primary-hover: var(--cyan-bright); --color-primary-active: var(--cyan-dim); --color-primary-soft: rgba(46, 211, 211, 0.12); --color-on-primary: var(--navy-0); --text-strong: #E8F3F4; --text-body: #E8F3F4; --text-muted: #88A4AB; --text-dim: #7C99A0; /* AA-large on cards (was #5F7C83, 3.7:1) */ --text-link: var(--cyan-bright); --text-inverse: var(--navy-0); --surface-page: var(--navy-0); --surface-card: var(--cmd-panel); --surface-raised: var(--cmd-panel-3); --surface-sunken: var(--navy-1); --surface-hover: #14303C; --surface-scrim: rgba(2, 10, 16, 0.62); --border-default: rgba(120, 190, 200, 0.16); --border-subtle: rgba(120, 190, 200, 0.09); --border-faint: rgba(120, 190, 200, 0.05); --border-strong: rgba(46, 211, 211, 0.45); --status-good: #37C98B; --status-good-bg: rgba(55, 201, 139, 0.16); --status-warn: #E5A53B; --status-warn-bg: rgba(229, 165, 59, 0.16); --status-bad: #E5604B; --status-bad-bg: rgba(229, 96, 75, 0.18); /* Text on the matching -bg (badges): AA 4.5:1 or better. */ --status-good-text: var(--status-good); --status-warn-text: var(--status-warn); --status-bad-text: #F08A78; --status-info: #5BA8E0; --status-info-bg: rgba(91, 168, 224, 0.16); --focus-ring: var(--cyan); /* opaque: the 45% ring fell under 3:1 on raised cards */ --glow-primary: 0 0 24px rgba(46, 211, 211, 0.22); /* Shape — Signac controls are 7px; cards and panels keep the softer product rounding */ --radius-button: 7px; --radius-input: 7px; --radius-chip: 7px; --radius-card: 16px; --radius-panel: 18px; --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.4); --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.4); --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.55); /* App header bar: glassy navy on dark, brand teal on light. White text/chrome works on both — header rules keep literal white. */ --header-bg: rgba(7, 21, 31, 0.92); --header-border: var(--border-subtle); /* Form fields must read as inset wells: LIGHTER than the card they sit on (seafar.eu form pattern), with a hairline you can actually see. */ --input-bg: var(--cmd-panel-3); --input-border: #5A8693; /* 3:1 non-text contrast (WCAG 1.4.11); the 28% hairline was 2.0:1 */ /* Page-ground motif: faint dotted control-room grid */ --page-grid: linear-gradient(var(--border-faint) 1px, transparent 1px), linear-gradient(90deg, var(--border-faint) 1px, transparent 1px); --page-grid-size: 56px 56px; } /* ------------------------------------------------------------------ */ /* T2 — semantic aliases: LIGHT (html[data-theme="light"]) */ /* ------------------------------------------------------------------ */ html[data-theme="light"] { color-scheme: light; /* #007A7A, not teal-500: white button text on #009999 is 3.5:1, here 5.0:1 (UX review 1650) */ --color-primary: #007A7A; --color-primary-hover: var(--teal-800); --color-primary-active: #005555; --color-primary-soft: var(--teal-100); --color-on-primary: #FFFFFF; --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-600); /* ink-500 was 3.8:1 on white */ --text-dim: #52716F; --text-link: var(--teal-700); --text-inverse: #FFFFFF; --surface-page: var(--ink-50); --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: var(--ink-100); --surface-hover: var(--ink-100); --surface-scrim: rgba(11, 34, 39, 0.4); --border-default: var(--ink-300); --border-subtle: var(--ink-200); --border-faint: rgba(11, 34, 39, 0.05); --border-strong: var(--teal-500); --status-good: #1B9C6B; --status-good-bg: #E3F5EC; --status-warn: #D99100; --status-warn-bg: #FBF1D6; --status-bad: #D64545; --status-bad-bg: #FBE6E6; /* Text on the matching -bg (badges): AA 4.5:1 or better; the status colours themselves are too light. */ --status-good-text: #0E6E4A; --status-warn-text: #8A5A00; --status-bad-text: #A82E2E; --status-info: #2F7DC4; --status-info-bg: #E4EFF8; --focus-ring: #007A7A; --glow-primary: none; /* Shape — buttons and chips keep the dark theme's geometry so components read the same in both themes (the earlier pill aliasing made tooltips and buttons balloon on light); the softer product rounding stays on inputs, cards and panels. */ --radius-button: 7px; --radius-input: 10px; --radius-chip: 7px; --radius-card: 14px; --radius-panel: 20px; --shadow-card: 0 4px 14px rgba(11, 34, 39, 0.08); --shadow-panel: 0 12px 32px rgba(11, 34, 39, 0.12); --shadow-overlay: 0 24px 56px rgba(11, 34, 39, 0.16); --header-bg: var(--brand-teal); --header-border: rgba(255, 255, 255, 0.18); --input-bg: #FFFFFF; --input-border: #6C8A8D; --page-grid: none; --page-grid-size: auto; } /* ------------------------------------------------------------------ */ /* T3a — Radzen dark block (GENERATED — see header). Dark theme only. */ /* Mirrors material-dark-base.css var derivations with the Seafar */ /* navy/cyan palette. Vars bridged from T2 below are excluded here. */ /* ------------------------------------------------------------------ */ :root:not([data-theme="light"]) { --rz-accordion-item-border: var(--rz-border-base-900); --rz-alert-background-color: transparent; --rz-alert-color: var(--rz-on-primary); --rz-alert-icon-color: var(--rz-on-primary); --rz-alert-title-color: var(--rz-on-primary); --rz-base: #1a3a4a; --rz-base-100: #88a4ab; --rz-base-200: #55707a; --rz-base-300: #2e4c58; --rz-base-400: #1a3a4a; --rz-base-50: #e8f3f4; --rz-base-500: #16333f; --rz-base-600: #14303c; --rz-base-700: #102a38; --rz-base-800: #0e2735; --rz-base-900: #0c2230; --rz-base-dark: #102a38; --rz-base-darker: #04101a; --rz-base-light: #88a4ab; --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-500); --rz-border-hover: var(--rz-border-width) solid var(--rz-base-100); --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300); --rz-button-focus-outline: var(--rz-outline-focus); --rz-card-border: var(--rz-border-base-500); --rz-carousel-pager-button-active-background-color: var(--rz-base-50); --rz-carousel-pager-button-active-color: var(--rz-on-base-light); --rz-carousel-pager-button-hover-background-color: var(--rz-base-200); --rz-carousel-pager-button-hover-color: var(--rz-on-base); --rz-checkbox-checked-disabled-background-color: var(--rz-base-300); --rz-checkbox-checked-disabled-border: var(--rz-border-300); --rz-chip-background-color: var(--rz-base-600); --rz-datalist-border: var(--rz-border-base-600); --rz-datalist-item-border: var(--rz-border-base-600); --rz-datepicker-calendar-hover-background-color: var(--rz-base-600); --rz-datepicker-calendar-hover-color: var(--rz-white); --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-dark); --rz-datepicker-calendar-selected-hover-color: var(--rz-on-secondary-dark); --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-base-100); --rz-dialog-background-color: var(--rz-base-900); --rz-dialog-mask-background-color: var(--rz-black); --rz-dialog-title-background-color: var(--rz-base-900); --rz-dropdown-filter-border: var(--rz-border-base-500); --rz-dropdown-item-hover-color: var(--rz-white); --rz-dropdown-open-background-color: var(--rz-base-600); --rz-editor-border: var(--rz-border-base-600); --rz-editor-separator-background-color: var(--rz-base-600); --rz-fieldset-border: var(--rz-border-base-600); --rz-fieldset-legend-color: var(--rz-text-secondary-color); --rz-fieldset-toggle-color: var(--rz-text-secondary-color); --rz-form-field-filled-background-color: var(--rz-base-600); --rz-form-field-filled-border: var(--rz-border-width) solid var(--rz-base-600); --rz-form-field-filled-focus-border: var(--rz-border-width) solid var(--rz-base-600); --rz-form-field-filled-hover-background-color: var(--rz-base-500); --rz-form-field-filled-hover-border: var(--rz-border-width) solid var(--rz-base-500); --rz-grid-apply-filter-button-background-color: var(--rz-base-600); --rz-grid-border: var(--rz-border-base-600); --rz-grid-bottom-cell-border: var(--rz-border-base-600); --rz-grid-cell-border: var(--rz-border-base-600); --rz-grid-clear-filter-button-background-color: var(--rz-base-600); --rz-grid-detail-template-background-color: var(--rz-base-900); --rz-grid-filter-background-color: var(--rz-base-600); --rz-grid-filter-buttons-background-color: var(--rz-base-600); --rz-grid-foot-background-color: var(--rz-base-600); --rz-grid-frozen-cell-border: var(--rz-border-base-600); --rz-grid-group-header-item-background-color: var(--rz-base-600); --rz-grid-group-header-item-border: var(--rz-border-base-600); --rz-grid-header-cell-border: var(--rz-border-base-600); --rz-grid-header-cell-border-bottom: var(--rz-border-base-600); --rz-grid-header-sorted-background-color: var(--rz-base-600); --rz-grid-hover-background-color: var(--rz-base-600); --rz-grid-hover-color: var(--rz-white); --rz-grid-right-cell-border: var(--rz-border-base-600); --rz-grid-stripe-background-color: var(--rz-base-900); --rz-header-background-color: var(--rz-base-700); --rz-header-color: var(--rz-text-color); --rz-listbox-filter-border: var(--rz-border-base-500); --rz-menu-background-color: var(--rz-base-700); --rz-menu-item-hover-background-color: var(--rz-base-400); --rz-menu-item-hover-color: var(--rz-white); --rz-menu-item-icon-hover-color: var(--rz-white); --rz-menu-item-selected-color: var(--rz-primary); --rz-menu-top-item-background-color: var(--rz-base-700); --rz-menu-top-item-color: var(--rz-text-color); --rz-menu-top-item-hover-background-color: var(--rz-base-700); --rz-menu-top-item-hover-color: var(--rz-primary); --rz-menu-top-item-icon-color: var(--rz-text-color); --rz-menu-top-item-icon-hover-color: var(--rz-primary); --rz-menu-top-item-selected-color: var(--rz-primary); --rz-notification-container-background-color: var(--rz-base-800); --rz-on-base: #e8f3f4; --rz-on-base-light: #0c2230; --rz-on-base-lighter: #0c2230; --rz-on-primary-lighter: #2ed3d3; --rz-on-secondary-lighter: #19a3a3; --rz-overlay-background-color: var(--rz-base-600); --rz-pager-numeric-button-hover-background-color: var(--rz-base-600); --rz-pager-numeric-button-hover-color: var(--rz-white); --rz-pager-numeric-button-selected-color: var(--rz-primary); --rz-pager-summary-color: var(--rz-text-secondary-color); --rz-panel-menu-icon-color: var(--rz-text-secondary-color); --rz-panel-menu-item-2nd-level-color: var(--rz-text-color); --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-600); --rz-panel-menu-item-3rd-level-color: var(--rz-text-color); --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-600); --rz-panel-menu-item-border: var(--rz-border-base-600); --rz-panel-menu-item-color: var(--rz-text-color); --rz-panel-menu-item-hover-background-color: var(--rz-base-600); --rz-panel-menu-item-hover-color: var(--rz-white); --rz-profile-menu-background-color: var(--rz-base-700); --rz-profile-menu-item-hover-background-color: var(--rz-base-400); --rz-profile-menu-toggle-button-color: var(--rz-text-color); --rz-profile-menu-top-item-background-color: var(--rz-base-700); --rz-radio-checked-color: var(--rz-text-color); --rz-rating-focus-color: var(--rz-primary-light); --rz-scheduler-border: var(--rz-border-base-600); --rz-scheduler-border-color: var(--rz-base-600); --rz-scheduler-color: var(--rz-text-secondary-color); --rz-scheduler-header-border: var(--rz-border-base-600); --rz-scheduler-minor-border-color: var(--rz-base-700); --rz-scheduler-other-month-background-color: var(--rz-base-900); --rz-scheduler-view-button-border: var(--rz-border-base-600); --rz-scheduler-view-selected-border-color: var(--rz-base-600); --rz-scheduler-weekend-background-color: var(--rz-base-700); --rz-scheduler-weekend-color: var(--rz-text-tertiary-color); --rz-scrollbar-color: rgba(232, 243, 244, 0.12); --rz-secondary: #19a3a3; --rz-secondary-dark: #0d6e72; --rz-secondary-darker: #0a5a5e; --rz-secondary-light: #2ed3d3; --rz-secondary-lighter: rgba(46, 211, 211, 0.10); --rz-selectbar-background-color: var(--rz-base-background-color); --rz-selectbar-border: var(--rz-border-base-600); --rz-selectbar-selected-border: var(--rz-border-base-600); --rz-sidebar-border-inline-end: var(--rz-border-base-800); --rz-sidebar-color: var(--rz-white); --rz-sidebar-toggle-color: var(--rz-text-color); --rz-sidebar-toggle-hover-background-color: var(--rz-base-500); --rz-sidebar-toggle-hover-color: var(--rz-white); --rz-skeleton-animation-color: var(--rz-base-300); --rz-skeleton-background-color: var(--rz-base-400); --rz-slider-disabled-background-color: var(--rz-base-400); --rz-slider-disabled-handle-background-color: var(--rz-base-200); --rz-slider-disabled-range-background-color: var(--rz-base-200); --rz-splitter-bar-color: var(--rz-text-color); --rz-steps-color: var(--rz-text-secondary-color); --rz-steps-number-background-color: var(--rz-base-600); --rz-steps-number-color: var(--rz-text-secondary-color); --rz-switch-background-color: var(--rz-base-600); --rz-switch-circle-background-color: var(--rz-text-color); --rz-tabs-tab-focus-background-color: var(--rz-base-background-color); --rz-tabs-tab-hover-background-color: var(--rz-base-600); --rz-tabs-tab-selected-top-border-color: var(--rz-primary); --rz-text-body1-color: var(--rz-text-title-color); --rz-text-body2-color: var(--rz-text-title-color); --rz-text-button-color: var(--rz-text-title-color); --rz-text-caption-color: var(--rz-text-title-color); --rz-text-overline-color: var(--rz-text-title-color); --rz-text-tertiary-color: var(--rz-base-200); --rz-timeline-line-color: var(--rz-base-200); --rz-timeline-point-background-color: var(--rz-base-200); --rz-timepicker-border: var(--rz-border-base-600); --rz-timepicker-button-background-color: var(--rz-base-700); --rz-tree-node-hover-background-color: var(--rz-base-600); --rz-tree-node-hover-color: var(--rz-white); --rz-tree-transition: var(--rz-transition-all); --rz-upload-button-bar-background-color: var(--rz-base-700); --rz-upload-cancel-background-color: var(--rz-base-600); --rz-upload-choose-active-background-color: var(--rz-base-400); --rz-upload-choose-active-color: var(--rz-white); --rz-upload-choose-background-color: var(--rz-base-600); --rz-upload-choose-hover-background-color: var(--rz-base-400); --rz-upload-choose-hover-color: var(--rz-white); --rz-upload-files-remove-background-color: var(--rz-base-600); /* --- Dark-only additions (not generated) ------------------------ */ /* Quiet navy secondary (Cancel buttons etc.) — the brand keeps a single cyan accent; the generated cyan secondary was too loud. */ --rz-secondary: #16333F; --rz-secondary-light: #1A3A4A; --rz-secondary-lighter: rgba(232, 243, 244, 0.06); --rz-secondary-dark: #14303C; --rz-secondary-darker: #102A38; --rz-on-secondary: #E8F3F4; /* Cyan is bright — buttons need dark text for contrast */ --rz-on-primary: var(--navy-0); /* Radzen chart plumbing on navy */ --rz-chart-tooltip-background: rgba(12, 34, 48, 0.96); --rz-chart-tooltip-color: #E8F3F4; --rz-chart-tooltip-item-hover-background-color: #14303C; --rz-chart-marker-stroke: var(--navy-0); --rz-chart-axis-color: rgba(120, 190, 200, 0.14); /* Series hues too dark for navy ground — brightened */ --rz-series-1: var(--cyan); --rz-series-2: #2DD4BF; --rz-series-4: #93C5FD; --rz-series-14: #5EEAD4; --rz-series-16: #94A3B8; /* Blackbox chart tokens — DARK values (names frozen; consumed by app.css and inline SVG in IncidentDetails.razor) */ --blackbox-chart-surface: #0A1D2A; --blackbox-chart-surface-border: rgba(120, 190, 200, 0.12); --blackbox-chart-axis: rgba(120, 190, 200, 0.14); --blackbox-chart-axis-label: #7E9AA1; --blackbox-chart-grid: rgba(120, 190, 200, 0.09); --blackbox-chart-crosshair: rgba(46, 211, 211, 0.5); --blackbox-chart-tick-label: #88A4AB; --blackbox-chart-line: var(--cyan); --blackbox-chart-heading: var(--cyan); --blackbox-chart-cog: #E5A53B; --blackbox-chart-cursor: #FF8B77; --blackbox-chart-marker-fill: #0C2230; --blackbox-chart-marker-stroke: var(--cyan); --blackbox-chart-track-start: #5BA8E0; --blackbox-chart-track-end: #E5A53B; --blackbox-chart-donut-center: #0C2230; --blackbox-chart-donut-text: #E8F3F4; --blackbox-chart-legend-text: #88A4AB; --blackbox-chart-legend-value: #E8F3F4; --blackbox-chart-pill-border: rgba(232, 243, 244, 0.14); --blackbox-chart-pill-text: #E8F3F4; --blackbox-chart-state-remote-fill: rgba(46, 211, 211, 0.24); --blackbox-chart-state-remote-border: rgba(46, 211, 211, 0.40); --blackbox-chart-state-remote-text: #5EF0EC; --blackbox-chart-state-local-fill: rgba(140, 164, 171, 0.20); --blackbox-chart-state-local-border: rgba(140, 164, 171, 0.34); --blackbox-chart-state-local-text: #B7CDD2; --blackbox-chart-state-unassigned-fill: rgba(95, 124, 131, 0.18); --blackbox-chart-state-unassigned-border: rgba(95, 124, 131, 0.30); --blackbox-chart-state-unassigned-text: #B7CDD2; --blackbox-chart-state-alert-fill: rgba(229, 96, 75, 0.26); --blackbox-chart-state-alert-border: rgba(229, 96, 75, 0.40); --blackbox-chart-state-alert-text: #FF9E8D; --blackbox-chart-state-inactive-fill: rgba(25, 163, 163, 0.20); --blackbox-chart-state-inactive-border: rgba(25, 163, 163, 0.32); --blackbox-chart-state-inactive-text: #7FE0DC; --blackbox-chart-fill-1: rgba(46, 211, 211, 0.24); --blackbox-chart-fill-2: rgba(91, 168, 224, 0.22); --blackbox-chart-fill-3: rgba(45, 212, 191, 0.20); --blackbox-chart-fill-4: rgba(229, 165, 59, 0.22); --blackbox-chart-fill-5: rgba(255, 122, 138, 0.20); --blackbox-chart-fill-6: rgba(140, 163, 166, 0.20); --blackbox-chart-series-1: #2ED3D3; --blackbox-chart-series-2: #E5A53B; --blackbox-chart-series-3: #37C98B; --blackbox-chart-series-4: #B77CE0; --blackbox-chart-series-5: #E07C7C; --blackbox-chart-series-6: #5BA8E0; } /* ------------------------------------------------------------------ */ /* T3b — theme-following Radzen bridge (values track T2 per theme) */ /* ------------------------------------------------------------------ */ :root { --rz-primary: var(--color-primary); --rz-primary-light: var(--color-primary-hover); --rz-primary-lighter: var(--color-primary-soft); --rz-primary-dark: var(--color-primary-active); --rz-primary-darker: var(--color-primary-active); --rz-success: var(--status-good); --rz-warning: var(--status-warn); --rz-danger: var(--status-bad); --rz-info: var(--status-info); --rz-base-background-color: var(--surface-page); --rz-body-background-color: var(--surface-page); --rz-text-color: var(--text-body); --rz-text-title-color: var(--text-strong); --rz-text-secondary-color: var(--text-muted); --rz-text-disabled-color: var(--text-dim); --rz-input-background-color: var(--input-bg); --rz-input-color: var(--text-strong); --rz-input-border: 1px solid var(--input-border); --rz-input-hover-border: 1px solid var(--border-strong); --rz-input-focus-border: 1px solid var(--color-primary); --rz-input-placeholder-color: var(--text-dim); --rz-grid-header-background-color: var(--surface-sunken); --rz-grid-cell-color: var(--text-body); --rz-dropdown-item-hover-background-color: var(--surface-hover); --rz-chart-axis-label-color: var(--text-muted); --rz-border-radius: var(--radius-input); /* Legacy Blackbox aliases — DEPRECATED, kept so pre-redesign rules and inline styles keep resolving; remove when grep shows 0 uses. */ --blackbox-bg: var(--surface-page); --blackbox-surface: var(--surface-card); --blackbox-surface-strong: var(--surface-hover); --blackbox-border: var(--border-subtle); --blackbox-text: var(--text-body); --blackbox-muted: var(--text-muted); --blackbox-primary: var(--color-primary); --blackbox-primary-dark: var(--color-primary-active); --blackbox-navy: var(--text-strong); --blackbox-shadow: var(--shadow-card); --bb-space-1: var(--space-1); --bb-space-2: var(--space-2); --bb-space-3: var(--space-3); --bb-space-4: var(--space-4); --bb-space-6: var(--space-6); --bb-space-8: var(--space-8); --bb-radius-sm: var(--radius-input); --bb-radius-md: var(--radius-card); --bb-radius-lg: var(--radius-panel); --bb-radius-pill: var(--radius-pill); --bb-font-xs: 0.75rem; --bb-font-sm: 0.82rem; --bb-font-md: 0.92rem; --bb-font-lg: 1.1rem; /* Neutral series ramp (light-leaning; dark overrides above) */ --rz-series-1: var(--color-primary); --rz-series-2: #0D9488; --rz-series-3: #38BDF8; --rz-series-4: #0D1F31; --rz-series-5: #F59E0B; --rz-series-6: #FB7185; --rz-series-7: #8EDBD9; --rz-series-8: #60A5FA; --rz-series-9: #14B8A6; --rz-series-10: #67E8F9; --rz-series-11: #FBBF24; --rz-series-12: #93C5FD; --rz-series-13: #5EEAD4; --rz-series-14: #0F766E; --rz-series-15: #7DD3FC; --rz-series-16: #334155; --rz-series-17: #FDBA74; --rz-series-18: #FDA4AF; --rz-series-19: #CFF8F7; --rz-series-20: #BFDBFE; --rz-series-21: #99F6E4; --rz-series-22: #BAE6FD; --rz-series-23: #FDE68A; --rz-series-24: #CBD5E1; } /* ------------------------------------------------------------------ */ /* T3c — LIGHT theme chart + Radzen literals */ /* ------------------------------------------------------------------ */ html[data-theme="light"] { --rz-secondary: var(--teal-100); --rz-secondary-light: var(--teal-50); --rz-secondary-lighter: var(--teal-50); --rz-secondary-dark: var(--teal-200); --rz-secondary-darker: var(--teal-200); --rz-on-secondary: var(--ink-900); --rz-on-primary: #FFFFFF; --rz-chart-tooltip-background: rgba(255, 255, 255, 0.96); --rz-chart-tooltip-color: var(--ink-900); --rz-chart-tooltip-item-hover-background-color: var(--teal-100); --rz-chart-marker-stroke: var(--ink-50); --rz-chart-axis-color: #DBE4E8; --blackbox-chart-surface: #F3F7F7; --blackbox-chart-surface-border: #DFE8EA; --blackbox-chart-axis: #D8E4E7; --blackbox-chart-axis-label: #64748B; --blackbox-chart-grid: #E3EBED; --blackbox-chart-crosshair: rgba(0, 153, 153, 0.5); --blackbox-chart-tick-label: #64748B; --blackbox-chart-line: var(--color-primary); --blackbox-chart-heading: var(--color-primary); --blackbox-chart-cog: #B87A00; --blackbox-chart-cursor: #FB7185; --blackbox-chart-marker-fill: #FFFFFF; --blackbox-chart-marker-stroke: var(--color-primary-active); --blackbox-chart-track-start: #38BDF8; --blackbox-chart-track-end: #F59E0B; --blackbox-chart-donut-center: #FFFFFF; --blackbox-chart-donut-text: var(--ink-900); --blackbox-chart-legend-text: #475569; --blackbox-chart-legend-value: var(--ink-900); --blackbox-chart-pill-border: rgba(11, 34, 39, 0.12); --blackbox-chart-pill-text: var(--ink-900); --blackbox-chart-state-remote-fill: rgba(0, 153, 153, 0.20); --blackbox-chart-state-remote-border: rgba(0, 153, 153, 0.34); --blackbox-chart-state-remote-text: #006666; --blackbox-chart-state-local-fill: rgba(148, 163, 184, 0.18); --blackbox-chart-state-local-border: rgba(148, 163, 184, 0.32); --blackbox-chart-state-local-text: #334155; --blackbox-chart-state-unassigned-fill: rgba(100, 116, 139, 0.14); --blackbox-chart-state-unassigned-border: rgba(100, 116, 139, 0.24); --blackbox-chart-state-unassigned-text: #334155; --blackbox-chart-state-alert-fill: rgba(214, 69, 69, 0.16); --blackbox-chart-state-alert-border: rgba(214, 69, 69, 0.28); --blackbox-chart-state-alert-text: #991B1B; --blackbox-chart-state-inactive-fill: rgba(0, 138, 138, 0.14); --blackbox-chart-state-inactive-border: rgba(0, 138, 138, 0.24); --blackbox-chart-state-inactive-text: #006666; --blackbox-chart-fill-1: rgba(0, 153, 153, 0.20); --blackbox-chart-fill-2: rgba(56, 189, 248, 0.18); --blackbox-chart-fill-3: rgba(13, 148, 136, 0.16); --blackbox-chart-fill-4: rgba(245, 158, 11, 0.18); --blackbox-chart-fill-5: rgba(251, 113, 133, 0.16); --blackbox-chart-fill-6: rgba(148, 163, 184, 0.18); --blackbox-chart-series-1: #009999; --blackbox-chart-series-2: #0284C7; --blackbox-chart-series-3: #D97706; --blackbox-chart-series-4: #7C3AED; --blackbox-chart-series-5: #E11D48; --blackbox-chart-series-6: #64748B; } }