/* ═══════════════════════════════════════════════════════════════ NEXUS · PALETA DO LOGO (ciano → azul) Sobrescreve o acento monocromático da base por uma paleta derivada do logo do Nexus. Canvas escuro levemente mais azulado. Carregue DEPOIS de base.css e shell.css. ═══════════════════════════════════════════════════════════════ */ :root { /* ---------- SUPERFÍCIES (cool azulado, mais profundo) ---------- */ --bg: oklch(0.155 0.024 245); --bg-2: oklch(0.188 0.028 245); --surface: oklch(0.218 0.030 245); --surface-2: oklch(0.258 0.032 245); --line: oklch(0.32 0.032 245); --line-soft: oklch(0.28 0.028 245 / 0.6); /* ---------- TEXTO (cool neutro) ---------- */ --fg: oklch(0.975 0.006 240); --muted: oklch(0.76 0.020 240); --faint: oklch(0.60 0.026 240); /* ---------- ACENTO (ciano do logo) ---------- */ --acc: #34BDF0; /* ciano vivo do logo */ --acc-deep: #74CBEE; /* ciano claro p/ labels/eyebrows */ --acc-soft: rgba(52, 189, 240, 0.12); --acc-glow: rgba(52, 189, 240, 0.34); --on-acc: #062234; /* navy escuro p/ texto sobre ciano */ /* ---------- ACENTO SECUNDÁRIO (azul profundo do logo) ---------- */ --acc-2: #1E9FE0; /* shell deriva do acento */ --brand: var(--acc); --brand-soft: var(--acc-soft); --brand-glow: var(--acc-glow); /* sombras com tom do acento */ --shadow-cta: 0 14px 42px -12px rgba(52, 189, 240, 0.45); /* cores dos gráficos (acompanham o tema) */ --chart-ink: #E8F4FB; --chart-muted: #7FA8C2; --chart-grid: rgba(116, 203, 238, 0.12); --chart-tooltip: #10283A; --chart-pie-border: #0E1E2C; } /* mesh com pontos ciano sutis */ .mesh { background-image: radial-gradient(rgba(116, 203, 238, 0.16) 1px, transparent 1.4px); } /* glow ciano no topo do card de login */ .login-bg { background: radial-gradient(120% 90% at 80% 6%, rgba(52, 189, 240, 0.10), transparent 55%), radial-gradient(120% 90% at 80% 8%, transparent, oklch(0.13 0.02 245 / 0.6) 70%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 60%); } .login-card { border-top: 1px solid rgba(116, 203, 238, 0.30); box-shadow: var(--shadow-panel), 0 -1px 0 rgba(52, 189, 240, 0.12); } /* avatares e badges do chat já herdam o ciano via --acc */ /* gráfico/dashboard: realce ciano nos KPIs */ .kpi-value, .widget-kpi-value { color: var(--fg); } /* faixa de boas-vindas com brilho ciano */ .welcome-band { background: radial-gradient(120% 130% at 88% -20%, rgba(52, 189, 240, 0.12), transparent 55%), linear-gradient(180deg, var(--surface), var(--bg-2)); } /* role-tag superAdmin volta a ter texto escuro sobre ciano */ .role-tag.superAdmin { color: var(--on-acc); } /* foco dos inputs em ciano */ .input-wrapper input:focus, .select-field:focus, .panel-search input:focus, .db-selector-search input:focus, .sql-area:focus { box-shadow: 0 0 0 3px var(--acc-glow); } /* ═══════════════════════════════════════════════════════════════ TEMA CLARO Superfícies claras cool-tinted; o acento ciano (chip + texto navy) é mantido nos dois temas. Ative com [data-theme="light"] no . ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: oklch(0.975 0.006 245); --bg-2: oklch(0.955 0.008 245); --surface: oklch(1 0 0); --surface-2: oklch(0.945 0.010 245); --line: oklch(0.885 0.014 245); --line-soft: oklch(0.905 0.012 245 / 0.85); --fg: oklch(0.255 0.028 250); --muted: oklch(0.46 0.026 250); --faint: oklch(0.58 0.024 250); --acc-deep: #0E7BC0; /* azul mais escuro p/ labels legíveis no claro */ --shadow-cta: 0 14px 40px -14px rgba(52, 189, 240, 0.40); --shadow-panel: 0 30px 70px -44px rgba(20, 50, 80, 0.45); --shadow: 0 20px 48px -30px rgba(20, 50, 80, 0.35); --chart-ink: #1A3A4D; --chart-muted: #5A7E94; --chart-grid: rgba(40, 120, 180, 0.16); --chart-tooltip: #FFFFFF; --chart-pie-border: #FFFFFF; } [data-theme="light"] .mesh { background-image: radial-gradient(rgba(40, 120, 180, 0.12) 1px, transparent 1.4px); } /* barras translúcidas claras */ [data-theme="light"] .topbar, [data-theme="light"] .chat-header { background: rgba(255, 255, 255, 0.72); } /* fundo do app/login no claro */ [data-theme="light"] .login-bg { background: radial-gradient(120% 90% at 80% 6%, rgba(52, 189, 240, 0.14), transparent 55%), linear-gradient(180deg, oklch(0.985 0.006 245) 0%, oklch(0.945 0.010 245) 60%); } [data-theme="light"] .portal-bg, [data-theme="light"] .app-shell { background: var(--bg); } /* card de login no claro */ [data-theme="light"] .login-card { background: linear-gradient(180deg, #fff, oklch(0.97 0.008 245)); border-top: 1px solid rgba(52, 189, 240, 0.40); } /* scrollbar mais clara */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--line); } /* seleção de texto */ [data-theme="light"] ::selection { background: var(--acc-glow); color: var(--fg); } /* logo: no claro o ícone do logo (escuro) fica melhor com leve halo */ [data-theme="light"] .rail-logo { background: radial-gradient(120% 120% at 30% 20%, #fff, oklch(0.95 0.008 245)); } /* códigos inline e blocos no claro */ [data-theme="light"] .msg-body pre { background: oklch(0.96 0.008 245); } /* role-tag basicUser legível no claro */ [data-theme="light"] .role-tag.basicUser { color: var(--muted); }