/* ========================================================================== Light Engine Foundation Tokens -------------------------------------------------------------------------- Single source of truth for LE operator-facing surfaces. Dark-first, cinematic, WCAG AA. Link this file on any page that sets (or any LE-* page). Fixes the "whitewash" caused by iot-manager.css and other LE styles using var(--surface) / var(--surface-alt) without those tokens being defined anywhere in the codebase. Previously those 106 call sites resolved to `transparent`, letting the global foxtrot light palette (#F7FAFA) bleed through the card layer. This file does NOT modify the GR-admin light theme: the tokens it defines (--surface, --surface-alt, --surface-0..3, --text-1..3, --border-subtle, --border-strong, --accent-*, --elevation-1..3, --radius-*, --motion-*) were previously undefined globally, so defining them is additive for any page — it only changes rendering on pages that use them. ========================================================================== */ :root { /* ---- Surfaces ---- */ --surface-0: #0f172a; /* app bg */ --surface-1: #1e293b; /* card fill */ --surface-2: rgba(30, 41, 59, 0.7); /* nested card / sub-panel */ --surface-3: rgba(15, 23, 42, 0.6); /* input / control */ /* Backwards-compat aliases for existing CSS that references --surface / --surface-alt (iot-manager.css, switchbot-manager.css, and inline pages). */ --surface: var(--surface-1); --surface-alt: var(--surface-2); /* ---- Text ---- */ --text-1: #f1f5f9; /* primary */ --text-2: #cbd5e1; /* body */ --text-3: #94a3b8; /* muted */ --text-4: #64748b; /* extra muted */ /* Aliases for existing usage */ --text-primary: var(--text-1); --text-secondary: var(--text-3); --text-muted: var(--text-4); /* ---- Borders ---- */ --border-subtle: rgba(148, 163, 184, 0.12); --border-strong: rgba(148, 163, 184, 0.24); --border-focus: rgba(59, 130, 246, 0.55); /* Alias for existing --border usage */ --border: var(--border-subtle); /* ---- Accents (WCAG AA compliant text colors when on --surface-1) ---- */ --accent-blue: #60a5fa; --accent-green: #34d399; --accent-amber: #fbbf24; --accent-red: #f87171; --accent-purple: #a78bfa; --accent-indigo: #818cf8; --accent-teal: #5eead4; /* Accent surfaces — subtle tints for badges / callouts */ --accent-blue-soft: rgba(59, 130, 246, 0.14); --accent-green-soft: rgba(16, 185, 129, 0.14); --accent-amber-soft: rgba(245, 158, 11, 0.14); --accent-red-soft: rgba(239, 68, 68, 0.14); --accent-purple-soft: rgba(139, 92, 246, 0.14); --accent-teal-soft: rgba(94, 234, 212, 0.14); /* Accent borders for badges */ --accent-blue-edge: rgba(59, 130, 246, 0.35); --accent-green-edge: rgba(16, 185, 129, 0.35); --accent-amber-edge: rgba(245, 158, 11, 0.35); --accent-red-edge: rgba(239, 68, 68, 0.35); --accent-purple-edge: rgba(139, 92, 246, 0.35); --accent-teal-edge: rgba(94, 234, 212, 0.35); /* ---- Elevation ---- */ --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.15); --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --elevation-3: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.22); /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* ---- Motion ---- */ --motion-fast: 150ms; --motion-normal: 250ms; --motion-slow: 400ms; --motion-easing: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Typography ---- */ --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-size-xs: 0.75rem; /* 12px — floor for labels/badges */ --font-size-sm: 0.875rem; /* 14px — raised floor for operator body copy */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --line-height-tight: 1.25; --line-height-body: 1.5; } /* ========================================================================== LE Theme — applied when is present. Overrides the global foxtrot light --gr-* tokens so downstream components that read them (switchbot-manager.css, etc.) resolve to dark values without each page re-declaring them with !important. ========================================================================== */ body.le-theme { --gr-bg: var(--surface-0); --gr-surface: var(--surface-1); --gr-surface-alt: var(--surface-2); --gr-border: var(--border-subtle); --gr-text: var(--text-1); --gr-text-muted: var(--text-3); --gr-primary: var(--accent-teal); --gr-primary-hover: var(--accent-blue); --gr-primary-light: var(--accent-teal-soft); --gr-primary-soft: var(--accent-teal-soft); --gr-accent: var(--accent-blue); --gr-accent-soft: var(--accent-teal-soft); --gr-shadow: var(--elevation-2); --gr-shadow-lg: var(--elevation-3); } /* Aesthetic defaults — wrapped in :where() so they resolve at specificity (0,0,0) and do NOT override a page's own `body { background: ... }` rule. Many LE pages ship cinematic gradients in their own