/* ========================================================================== NOC Geomap — design tokens (claro/escuro) Tema padrão = escuro. Troque adicionando data-theme="light" no : const t = localStorage.getItem('nocgeomap.theme') || 'dark'; document.documentElement.setAttribute('data-theme', t); // ao trocar: localStorage.setItem('nocgeomap.theme', novo) + setAttribute Importe este arquivo ANTES do style.css. Todas as cores da UI saem daqui. ========================================================================== */ :root, :root[data-theme="dark"] { --bg: #06101d; --surface: #0b1828; --panel: rgba(10, 22, 38, .62); --panel-strong: rgba(11, 24, 40, .85); --header-bg: rgba(10, 22, 38, .72); --line: rgba(120, 180, 255, .16); --line-strong: rgba(120, 180, 255, .28); --text: #eaf3fb; --text-dim: #aebfd0; --text-soft: #7c93ab; --accent: #58c5ff; --accent-d: #9fe0ff; /* hover/realce (no escuro, mais claro) */ --accent-ink: #06101d; /* texto sobre o accent */ --accent-soft: rgba(88, 197, 255, .16); --accent-border: rgba(88, 197, 255, .5); --accent-glow: rgba(88, 197, 255, .25); --hover: rgba(120, 180, 255, .12); --inset: rgba(7, 16, 29, .6); --shadow: 0 8px 30px rgba(0, 0, 0, .4); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3); /* semântica de status (enlaces / POPs) */ --green: #2bd48a; /* operacional / todos no ar */ --amber: #ffb13d; /* saturado */ --azul: #3d7bff; /* FTTH queda parcial da PON */ --orange:#ff8a3d; /* POP parcial */ --red: #ff4d5e; /* down / nenhum responde */ --slate: #5d7088; /* sem trigger / sem vínculo */ --radius: 14px; color-scheme: dark; } :root[data-theme="light"] { --bg: #eceae1; --surface: #ffffff; --panel: rgba(255, 255, 255, .74); --panel-strong: rgba(255, 255, 255, .92); --header-bg: rgba(255, 255, 255, .85); --line: rgba(40, 70, 110, .16); --line-strong: rgba(40, 70, 110, .28); --text: #15242f; --text-dim: #42566a; --text-soft: #6f8294; --accent: #1f6feb; --accent-d: #1759c4; --accent-ink: #ffffff; --accent-soft: rgba(31, 111, 235, .10); --accent-border: rgba(31, 111, 235, .4); --accent-glow: rgba(31, 111, 235, .22); --hover: rgba(31, 111, 235, .08); --inset: rgba(20, 40, 70, .05); --shadow: 0 10px 30px rgba(40, 60, 100, .2); --shadow-sm: 0 2px 8px rgba(40, 60, 100, .14); --green: #1f9d57; --amber: #d98a00; --azul: #2f6bd6; --orange:#e07a2e; --red: #e23b48; --slate: #9aa3ad; color-scheme: light; }