/* Fizzavo Glow-UI theme (optional, Settings → Appearance → "Glow UI"). Activated by data-glow="on" on (chrome.js owns the attribute + localStorage persistence). Glow-UI law: every interactive element glows dimly; the selected/primary one glows brighter — state is brightness, not color swaps. Loaded after chrome.css so it wins the cascade. color-mix() is used instead of rgb(from …) for broader engine support. */ :root[data-glow="on"] { --glow-accent: #a78bfa; /* Fizzavo violet, dark-theme variant */ --bg: #06111a; --bg-elevated: #0a1722; --bg-sunken: #040c13; --paper: #06111a; --text: color-mix(in srgb, var(--glow-accent) 80%, white); --text-muted: color-mix(in srgb, var(--glow-accent) 55%, #6b7a8a); --border: color-mix(in srgb, var(--glow-accent) 22%, transparent); --focus-ring: var(--glow-accent); --shadow-sm: 0 0 6px color-mix(in srgb, var(--glow-accent) 10%, transparent); --shadow-md: 0 0 18px color-mix(in srgb, var(--glow-accent) 18%, transparent); } /* Void backdrop with a soft wide accent tint — never mid-gray. */ :root[data-glow="on"] body { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--glow-accent) 9%, transparent), transparent 70%), var(--bg); } /* Panels: dimmest layer — barely lighter than the void, floating on a soft accent shadow, no hard border. */ :root[data-glow="on"] .card { background: color-mix(in srgb, var(--glow-accent) 4%, var(--bg)); border-color: transparent; box-shadow: 0 0 18px color-mix(in srgb, var(--glow-accent) 18%, transparent); } /* Idle interactive: dim recipe (lit, never flat). */ :root[data-glow="on"] .btn, :root[data-glow="on"] .nav-link, :root[data-glow="on"] .brand-select, :root[data-glow="on"] .input, :root[data-glow="on"] select, :root[data-glow="on"] textarea { color: color-mix(in srgb, var(--glow-accent) 78%, transparent); background: color-mix(in srgb, var(--glow-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--glow-accent) 30%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--glow-accent) 16%, transparent); } /* Bright recipe: primary action + active selection. */ :root[data-glow="on"] .btn-primary, :root[data-glow="on"] .nav-link.active { color: var(--glow-accent); text-shadow: 0 0 6px color-mix(in srgb, var(--glow-accent) 60%, transparent); background: color-mix(in srgb, var(--glow-accent) 16%, transparent); border: 1.5px solid color-mix(in srgb, var(--glow-accent) 62%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent) 48%, transparent); } /* Destructive: reserved warm red, same two-brightness rules. */ :root[data-glow="on"] .crisis-btn { --glow-accent: #f87171; } /* Appearance toggle row (Settings → Appearance) — same idle/lit recipe as other controls, kept subtle since it's a plain checkbox + label. */ :root[data-glow="on"] .appearance-toggle-row { color: color-mix(in srgb, var(--glow-accent) 80%, white); } :root[data-glow="on"] .appearance-toggle-row input[type="checkbox"] { accent-color: var(--glow-accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--glow-accent) 50%, transparent)); } /* Disabled: unlit hardware, not grayed-out UI. */ :root[data-glow="on"] .btn:disabled { filter: saturate(0.35); opacity: 0.45; } :root[data-glow="on"] .btn:not(:disabled):active { transform: scale(0.96); } @media (prefers-reduced-motion: reduce) { :root[data-glow="on"] .btn:not(:disabled):active { transform: none; } }