/* ============================================================================= VODFORGE — themes.css · ÚNICA casa das variáveis de tema (regra da casa) ============================================================================= Este arquivo é estático, FORA do pipeline do Tailwind. Por quê: o Tailwind v4 (Lightning CSS) tree-shaka custom properties declaradas no input.css a cada regeneração. Qualquer variável de tema (nova OU legada) mora AQUI e SÓ aqui. É carregado DEPOIS do app.css nos layouts (mesmo cache-busting); como não usa @layer, vence a camada @layer theme do Tailwind. Estrutura: 1. REDESIGN — tokens oficiais (asset pack). Dark é o default no :root; o claro sobrescreve os MESMOS tokens sob html.theme-light. Os seletores .theme-scope-dark / .theme-scope-light permitem forçar um tema numa subárvore (usado no showroom /admin/ui-kit). 2. LEGADO — overrides dark do sistema antigo (--color-*), intocados até a Fase 2. As telas existentes continuam com o visual atual. ========================================================================== */ /* --------------------------------------------------------------------------- 1a. REDESIGN — TEMA ESCURO (default) — valores exatos do asset pack ------------------------------------------------------------------------- */ :root, .theme-scope-dark { /* Superfícies */ --bg: #050A0F; --surface: #07131C; --surface-2: #0A1720; /* um passo acima da surface (derivado, sem puxar pro marinho) */ --border: #163141; /* Acento primário (verde neon — gradiente da logo é verde→azul) */ --accent: #00E676; --accent-soft: #7DFFA8; --accent-soft-2: #A7F3C4; /* Secundários oficiais */ --accent-blue: #00B8FF; --accent-violet: #A78BFA; /* séries de dados/batches (legível no escuro) */ /* Semânticos */ --success: #00E676; --success-soft: #7DFFA8; --success-bg: #06381F; --warning: #FFB224; /* âmbar derivado, coerente com a paleta */ --warning-soft: #FFD166; --warning-bg: #3A2A06; --danger: #FF4D6D; --danger-soft: #FF7A90; --danger-bg: #3B0A16; /* Texto */ --text: #F5FAFF; --text-muted: #AFC4D1; --text-faint: #84A4B8; /* Forma e profundidade */ --radius-card: 14px; --radius-pill: 999px; --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.55); --card-border: var(--border); /* no claro vira transparente (sem borda dura) */ /* Fundos translúcidos (badge de ícone dos KPIs, pílulas, track do anel). Valores LITERAIS de propósito: color-mix no input.css fazia o Lightning CSS emitir fallback sólido sob @supports(in lab) — em browser que reprova o teste, o badge virava bloco chapado e o ícone (mesma cor) sumia. */ --accent-dim: rgba(0, 230, 118, 0.12); --success-dim: rgba(0, 230, 118, 0.12); --blue-dim: rgba(0, 184, 255, 0.12); --violet-dim: rgba(167, 139, 250, 0.14); --warning-dim: rgba(255, 178, 36, 0.14); --danger-dim: rgba(255, 77, 109, 0.13); --neutral-dim: rgba(175, 196, 209, 0.12); --ring-track: rgba(132, 164, 184, 0.25); /* Glows mais fortes (linhas/sombras animadas da cena de transferência) */ --success-glow: rgba(0, 230, 118, 0.35); --warning-glow: rgba(255, 178, 36, 0.40); --danger-glow: rgba(255, 77, 109, 0.40); /* Botão/link primário (mockup dark: outline verde com glow) */ --btn-primary-bg: rgba(0, 230, 118, 0.10); --btn-primary-fg: #7DFFA8; --btn-primary-border: rgba(0, 230, 118, 0.55); --btn-primary-shadow: 0 0 18px rgba(0, 230, 118, 0.22); /* Derivados tema-aware (evitam seletores por tema nos componentes): glow da cena de servidores e shimmer (varredura só faz sentido no dark). */ --scene-glow: #00E676; --shimmer-opacity: 1; /* Cena isométrica (uiServerScene v2): faces das plataformas + fundo radial sutil do card (mockup: a ilustração vive numa área um passo mais funda). */ --scene-top: #0B1D2A; --scene-side-l: #050C13; --scene-side-r: #07141D; --scene-bg: radial-gradient(ellipse 70% 55% at 50% 60%, rgba(0, 230, 118, 0.09), rgba(5, 10, 15, 0) 72%); /* logo da cena: verde-ciano oficial + glow verde */ --scene-logo-filter: drop-shadow(0 8px 16px rgba(0, 230, 118, 0.55)); /* Fundo da tela de login (grid-glow oficial da F1; no claro só a cor) */ --login-backdrop: #050A0F url("/static/img/brand/vodforge-assets/backgrounds/vodforge-grid-glow.svg") center / cover no-repeat; /* Terminal do publish P2 — idêntico nos dois temas (terminal é sempre escuro), migrado dos hex soltos do p2b.templ sem mudança visual. */ --term-bg: #0a0f12; --term-text: #c8d4da; } /* --------------------------------------------------------------------------- 1b. REDESIGN — TEMA CLARO (sobrescreve os MESMOS tokens) Fiel ao mockup: fundo cinza-claríssimo, cards brancos com sombra suave (sem borda dura), acento primário roxo/violeta ("Novo título" roxo sólido), verde permanece em sucesso/positivos, textos escuros. ------------------------------------------------------------------------- */ html.theme-light, .theme-scope-light { /* Superfícies */ --bg: #F2F5F9; --surface: #FFFFFF; --surface-2: #F6F8FC; --border: #E7EDF4; /* borda suave; profundidade vem da sombra */ /* Acento primário (violeta do mockup claro) */ --accent: #8B5CF6; --accent-soft: #A78BFA; --accent-soft-2: #C4B5FD; /* Secundários */ --accent-blue: #0095DB; /* calibrado p/ contraste sobre branco */ --accent-violet: #8B5CF6; /* Semânticos — verde segue dono de sucesso/positivos */ --success: #00A455; /* legível como texto sobre branco */ --success-soft: #00C853; --success-bg: #E3F8EC; --warning: #B45309; --warning-soft: #F59E0B; --warning-bg: #FEF3C7; --danger: #E11D48; --danger-soft: #FB7185; --danger-bg: #FFE4E9; /* Texto */ --text: #101828; --text-muted: #51606F; --text-faint: #8595A6; /* Forma e profundidade */ --shadow-card: 0 8px 24px -10px rgba(16, 24, 40, 0.12), 0 2px 6px -2px rgba(16, 24, 40, 0.06); --card-border: transparent; /* card branco só com sombra suave (mockup) */ /* Fundos translúcidos (calibrados p/ superfícies claras) */ --accent-dim: rgba(139, 92, 246, 0.12); --success-dim: rgba(0, 164, 85, 0.12); --blue-dim: rgba(0, 149, 219, 0.12); --violet-dim: rgba(139, 92, 246, 0.12); --warning-dim: rgba(245, 158, 11, 0.15); --danger-dim: rgba(225, 29, 72, 0.10); --neutral-dim: rgba(81, 96, 111, 0.10); --ring-track: rgba(133, 149, 166, 0.28); /* Glows (calibrados p/ fundo claro) */ --success-glow: rgba(0, 164, 85, 0.35); --warning-glow: rgba(245, 158, 11, 0.45); --danger-glow: rgba(225, 29, 72, 0.35); /* Botão/link primário (mockup claro: roxo sólido) */ --btn-primary-bg: #8B5CF6; --btn-primary-fg: #FFFFFF; --btn-primary-border: transparent; --btn-primary-shadow: 0 8px 18px -8px rgba(139, 92, 246, 0.55); /* Derivados tema-aware */ --scene-glow: #8B5CF6; /* cena de servidores brilha roxo no claro */ --shimmer-opacity: 0; /* shimmer é dark-only */ /* Cena isométrica: plataformas claras com lavanda (mockup light) */ --scene-top: #EDE9FE; --scene-side-l: #C7B8F8; --scene-side-r: #DDD2FB; --scene-bg: radial-gradient(ellipse 70% 55% at 50% 60%, rgba(139, 92, 246, 0.10), rgba(255, 255, 255, 0) 72%); /* logo da cena: mark oficial girado pro violeta (mockup light) + glow roxo */ --scene-logo-filter: hue-rotate(115deg) saturate(0.85) drop-shadow(0 8px 16px rgba(139, 92, 246, 0.5)); /* Login claro: sem o grid escuro, só o fundo do tema */ --login-backdrop: #F2F5F9; } /* --------------------------------------------------------------------------- 2. LEGADO (pré-redesign) — overrides do tema ESCURO do sistema --color-*. As telas existentes usam estes tokens até a Fase 2. NÃO MEXER: qualquer ajuste aqui muda o visual atual. O claro legado são os defaults do @theme no input.css. Chaveado por [data-theme="dark"] (sistema antigo). ------------------------------------------------------------------------- */ [data-theme="dark"] { --color-page: #0d1215; --color-surface: #141b1f; --color-ink: #eef2f4; --color-ink-soft: #93a3ab; --color-ink-muted: #5a6a72; --color-petrol: #dbe3e7; /* petrol-as-texto/borda -> claro no escuro */ --color-accent-dark: #5dd876; /* texto de sucesso -> verde brilhante */ --color-warn: #f2c14e; /* rodando/pendente -> ambar */ --color-warn-dark: #f2c14e; /* texto ambar legivel no escuro */ --color-danger-dark: #ff6b7a; /* texto vermelho claro */ }