/* ============================================================================= LAYER 2 - DARK THEME ROLES ----------------------------------------------------------------------------- Each role names a JOB (page background, muted text, input outline...) and points it at a palette color. Components use only these names. Active when (set in app.py index_string). Any element can carry data-bs-theme to keep a fixed theme (e.g. login). Rules for this file: - Values are var(--palette-...) or mixes of other roles. No hex. - Every role here must also exist in 02_theme-light.css. - Roles that mix other roles (color-mix) stay in this block, not :root, so fixed-theme areas compute them from their own theme. Contrast (WCAG AA) was checked for every text/background pair. ============================================================================= */ [data-bs-theme="dark"] { color-scheme: dark; /* native scrollbars and form controls follow */ /* Surfaces: only these four paint a background. Everything inside is transparent. */ --color-bg-app: var(--palette-slate-950); /* page, behind panels */ --color-surface: var(--palette-slate-900); /* panels, cards, sidebars, navbar */ --color-surface-raised: var(--palette-slate-850); /* menus, popovers, modals, hover labels */ --color-field: var(--palette-slate-800); /* inputs and dropdowns: filled, a step lighter than the panel */ --color-field-text: var(--palette-slate-200); /* values inside fields and dropdown lists (was lightgray) */ /* Text: four levels, matched to the original UI (#fff / #bebebe / #999 / #6c757d) */ --color-text-strong: var(--palette-slate-100); /* active items, names, headings 14.1:1 */ --color-text: var(--palette-slate-300); /* body text, labels, icons 9.7:1 */ --color-text-muted: var(--palette-slate-400); /* meta text (company, email) 5.5:1 */ --color-text-subtle: var(--palette-slate-500); /* placeholders, disabled 4.0:1 */ /* Lines */ --color-border: var(--palette-slate-750); /* dividers, panel edges, input and label outlines */ --color-border-strong: var(--palette-slate-600); /* emphasis only: secondary-button outline, hover */ /* Accent: marks what is active or primary. Nothing else. In the dark theme it is the soft gold (not the saturated logo amber, which glares on dark). */ --color-accent: var(--palette-gold-500); /* primary button fill */ --color-accent-hover: var(--palette-gold-400); /* primary button hover */ --color-accent-strong: var(--palette-gold-500); /* active tab, checkbox, switch, slider */ --color-accent-text: var(--palette-gold-500); /* links, accent text, picker headers 6.4:1 on fields */ --color-on-accent: var(--palette-slate-950); /* text on an accent fill 8.4:1 */ --color-on-accent-strong: var(--palette-slate-950); /* tick or knob on an accent-strong fill: dark on the gold */ /* Action buttons (Apply, Cluster, Add Slope in Diagnostics): their fill and the label on it. Here simply the accent, with dark text (the light theme needs a deeper amber for white text). */ --color-action: var(--color-accent); --color-action-hover: var(--color-accent-hover); --color-on-action: var(--color-on-accent); /* Status */ --color-success: var(--palette-green-400); --color-warning: var(--palette-orange-400); --color-danger: var(--palette-red-400); --color-info: var(--palette-blue-400); /* Charts (chart text, axis lines; data colors are --data-*) */ --chart-text: var(--color-text); /* all chart text, ticks and titles alike (2026-10-04) */ --chart-axis: var(--palette-slate-700); /* Fluids (domain roles): the oil-and-gas convention, oil green and gas red */ --fluid-oil: var(--palette-green-400); --fluid-gas: var(--palette-red-400); /* AI assistant modes: two tones of the amber family, one per mode */ --ai-analyze: var(--palette-bronze-400); /* ANALYZE acts on the map: a deeper bronze, clearly apart from ASK */ --ai-ask: var(--palette-gold-200); /* ASK only answers: a lighter gold */ --ai-on-mode: var(--palette-slate-950); /* arrow on the send button, filled in the mode tone */ /* Icons that are images (SVG can't read CSS variables): one per theme */ --icon-switch-knob: var(--palette-icon-switch-knob); /* switch "on": dark knob, like the panel (the slider ring's center matches) */ --icon-check: var(--palette-icon-check); /* checkbox tick, same color as --color-on-accent-strong */ /* Derived: mixed from the roles above, so they follow any change to them */ --color-overlay: color-mix(in srgb, var(--palette-slate-950) 70%, transparent); --color-backdrop: color-mix(in srgb, var(--palette-black) 85%, transparent); /* panels drawn over content (chart settings) */ --color-accent-subtle: color-mix(in srgb, var(--color-accent) 14%, transparent); /* selected row, active option */ --color-state-hover: color-mix(in srgb, var(--color-text-strong) 6%, transparent); /* hover overlay, any surface */ --color-state-pressed: color-mix(in srgb, var(--color-text-strong) 10%, transparent); /* pressed overlay, chips, tracks */ --color-focus-ring: color-mix(in srgb, var(--color-accent-strong) 45%, transparent); --color-focus-border: color-mix(in srgb, var(--color-accent-strong) 50%, var(--color-border)); /* soft amber outline on a focused field */ --color-border-subtle: color-mix(in srgb, var(--color-text-strong) 6%, transparent); /* hairlines inside panels */ --color-field-hover: color-mix(in srgb, var(--color-field), var(--color-text-strong) 8%); /* solid hover for filled controls */ --color-row-stripe: color-mix(in srgb, var(--color-text-strong) 5%, transparent); /* alternate table rows (same strength as the original grid's stripes) */ --color-row-hover: color-mix(in srgb, var(--color-text-strong) 12%, transparent); /* hovered table row, clearly above a stripe */ --shadow-color: color-mix(in srgb, var(--palette-black) 35%, transparent); /* for directional shadows */ --chart-grid: color-mix(in srgb, var(--color-text-strong) 8%, transparent); --shadow-raised: 0 18px 40px -12px color-mix(in srgb, var(--palette-black) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--palette-white) 4%, transparent); }