/* * Design tokens — the single styling source of truth (WebUI.md §2). Components reference var(--token) * only; a theme is just an override of these values, selected by data-theme on . Light + dark * ship now; brand themes are an additive token map later (no code change). */ :root, :root[data-theme="light"] { --color-bg: #f4f5f7; --color-surface: #ffffff; --color-surface-2: #eef0f3; --color-border: #d8dce1; --color-text: #1b1f24; --color-text-muted: #5b6470; --color-primary: #1466c4; --color-primary-contrast: #ffffff; --color-danger: #c62828; --color-disabled: #9aa3ad; --color-alarm-active: #d32f2f; --color-alarm-ack: #f59e0b; --color-alarm-clear: #2e7d32; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --radius-1: 4px; --radius-2: 8px; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-size: 14px; --elevation-1: 0 1px 2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.10); --tabbar-height: 52px; } :root[data-theme="dark"] { --color-bg: #14171c; --color-surface: #1d2127; --color-surface-2: #262b33; --color-border: #333a44; --color-text: #e6e9ee; --color-text-muted: #9aa3ae; --color-primary: #4c9bf0; --color-primary-contrast: #08233f; --color-danger: #ef5350; --color-disabled: #5b6470; --color-alarm-active: #ef5350; --color-alarm-ack: #fbbf24; --color-alarm-clear: #66bb6a; --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); }