/* ============================================================================= LAYER 2 - LIGHT THEME ROLES ----------------------------------------------------------------------------- The same roles as 01_theme-dark.css, with light values. Active when (chosen in the user menu, assets/theme.js). Rules for this file: - Every role in 01_theme-dark.css must exist here, and nothing else. - Values are var(--palette-...) or mixes of other roles. No hex. - Values come from the approved preview. On white, the accent is the deeper amber (logo amber fails contrast there, D14): amber-700 for lines and controls, amber-800 for text. Status colors use their 700 shades. ============================================================================= */ [data-bs-theme="light"] { color-scheme: light; /* native scrollbars and form controls follow */ /* Surfaces */ --color-bg-app: var(--palette-slate-50); /* page, behind panels */ --color-surface: var(--palette-white); /* panels, cards, sidebars, navbar */ --color-surface-raised: var(--palette-white); /* menus, popovers, modals (lifted by their shadow) */ --color-field: var(--palette-slate-50); /* inputs and dropdowns: filled, a step darker than the panel */ --color-field-text: var(--palette-slate-800); /* values inside fields and dropdown lists */ /* Text: four levels. Ratios are the lowest, on the page or a field (python scripts/check_theme.py --contrast -v lists every pair). */ --color-text-strong: var(--palette-slate-900); /* 16.8:1 */ --color-text: var(--palette-slate-700); /* 8.9:1 */ --color-text-muted: var(--palette-slate-600); /* 5.4:1 */ --color-text-subtle: var(--palette-slate-500); /* 3.9:1, placeholders, disabled, resting icons only */ /* Lines */ --color-border: var(--palette-slate-150); --color-border-strong: var(--palette-slate-400); /* Accent */ --color-accent: var(--palette-amber-500); /* primary button fill (dark text on it) */ --color-accent-hover: var(--palette-amber-600); --color-accent-strong: var(--palette-amber-700); /* active tab, checkbox, switch, slider 3.4:1 */ --color-accent-text: var(--palette-amber-800); /* links, accent text 4.8:1 */ --color-on-accent: var(--palette-slate-900); --color-on-accent-strong: var(--palette-white); /* tick or knob on an accent-strong fill: white on the deeper amber, 3.4:1 */ /* Action buttons (Apply, Cluster, Add Slope in Diagnostics): their fill, and the label on it. White on the deepest amber, like the white knob on the switches; the logo amber (--color-accent) is too light for white text (2:1). Used at rest by solid buttons, on hover and click by outline ones. */ --color-action: var(--palette-amber-800); /* white on it 5.2:1 */ --color-action-hover: color-mix(in srgb, var(--palette-amber-800) 85%, var(--palette-slate-900)); /* pressed */ --color-on-action: var(--palette-white); /* Status */ --color-success: var(--palette-green-700); --color-warning: var(--palette-orange-700); --color-danger: var(--palette-red-700); --color-info: var(--palette-blue-700); /* Charts */ --chart-text: var(--color-text); /* all chart text, ticks and titles alike (2026-10-04) */ --chart-axis: var(--palette-slate-200); /* Fluids (domain roles) */ --fluid-oil: var(--palette-green-700); --fluid-gas: var(--palette-red-700); /* AI assistant modes (D16), in shades readable on white */ --ai-analyze: var(--palette-bronze-700); --ai-ask: var(--palette-gold-700); --ai-on-mode: var(--palette-white); /* 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-white); /* switch "on": white knob, like the panel (the slider ring's center matches) */ --icon-check: var(--palette-icon-check-white); /* checkbox tick, same color as --color-on-accent-strong */ /* Derived: the same formulas as the dark theme, tuned for white where noted */ --color-overlay: color-mix(in srgb, var(--palette-slate-900) 40%, transparent); --color-backdrop: color-mix(in srgb, var(--palette-white) 90%, transparent); /* panels drawn over content (chart settings) */ --color-accent-subtle: color-mix(in srgb, var(--color-accent) 14%, transparent); --color-state-hover: color-mix(in srgb, var(--color-text-strong) 5%, transparent); --color-state-pressed: color-mix(in srgb, var(--color-text-strong) 9%, transparent); --color-focus-ring: color-mix(in srgb, var(--color-accent-strong) 35%, transparent); --color-focus-border: color-mix(in srgb, var(--color-accent-strong) 50%, var(--color-border)); --color-border-subtle: color-mix(in srgb, var(--color-text-strong) 6%, transparent); --color-field-hover: color-mix(in srgb, var(--color-field), var(--color-text-strong) 5%); --color-row-stripe: color-mix(in srgb, var(--color-text-strong) 4%, transparent); --color-row-hover: color-mix(in srgb, var(--color-text-strong) 8%, transparent); --shadow-color: color-mix(in srgb, var(--palette-slate-900) 18%, transparent); --chart-grid: color-mix(in srgb, var(--color-text-strong) 8%, transparent); --shadow-raised: 0 18px 40px -16px color-mix(in srgb, var(--palette-slate-900) 28%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--palette-slate-900) 10%, transparent); }