/* ========================================================================= Controle Show — Design System (tokens + componentes base) Base: paleta Flat UI modernizada da v1.0. Light mode. Mobile-first. ========================================================================= */ :root { /* Cores de marca — TEMA PADRÃO (azul blue-600, o visual de sempre). O tema é trocado em Configurações > Identidade: o shell estampa data-csw-tema no e o bloco [data-csw-tema="logo"] abaixo sobrepõe estes tokens com as cores da logo. */ --csw-primary: #2563eb; --csw-primary-600: #1d4ed8; --csw-primary-700: #1e40af; --csw-primary-soft: #eff6ff; /* Tokens temáveis usados nas classes arbitrárias do app JS */ --csw-thead: #0056a0; /* cabeçalho azul das tabelas */ --csw-green: #28b050; /* botão verde (CSW_GREEN_BTN) */ --csw-green-600: #229648; /* hover do botão verde */ /* Superfícies */ --csw-bg: #f1f5f9; --csw-surface: #ffffff; --csw-surface-2: #f8fafc; --csw-sidebar: #1e293b; --csw-sidebar-hover: #334155; --csw-sidebar-active: #2563eb; /* MENU lateral (tokens do tema — o app JS pinta por .csw-aside/.csw-nav-*) */ --csw-aside: #0f172a; /* fundo (slate-900 = o de sempre) */ --csw-aside-sep: #1e293b; /* bordas do topo/rodapé */ --csw-aside-link: #cbd5e1; /* texto do item */ --csw-aside-hover: #1e293b; /* fundo do item no hover */ --csw-aside-foot: #64748b; /* rodapé */ --csw-aside-grp: #94a3b8; /* cabeçalho de grupo (CADASTROS, VENDAS…) */ --csw-aside-sub: #64748b; /* sub-rótulo dentro do grupo */ /* Texto */ --csw-text: #0f172a; --csw-text-muted: #64748b; --csw-text-invert: #f8fafc; /* Estados */ --csw-success: #059669; --csw-warning: #d97706; --csw-danger: #dc2626; --csw-danger-600: #b91c1c; /* Bordas / raios / sombras */ --csw-border: #e2e8f0; --csw-radius-sm: 6px; --csw-radius: 10px; --csw-radius-lg: 16px; --csw-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --csw-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12); /* Espaços / tipografia */ --csw-space: 16px; --csw-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Layout */ --csw-sidebar-w: 260px; --csw-topbar-h: 60px; } /* ===================================================================== TEMA "CORES DA LOGO" (Configurações > Identidade > Tema de cores) Azul do arco (#3b9af5) e verde do cifrão (#34a853) do logotipo. Botões/títulos usam tons 1 passo mais escuros p/ contraste AA de texto branco. As escalas Twind blue/emerald são remapeadas no shell. ===================================================================== */ html[data-csw-tema="logo"] { --csw-primary: #1a73cf; --csw-primary-600: #155ca8; --csw-primary-700: #124b88; --csw-primary-soft: #eff7ff; --csw-thead: #155ca8; --csw-green: #34a853; --csw-green-600: #2b8c45; --csw-sidebar: #1669c2; --csw-sidebar-hover: #2f86dd; --csw-sidebar-active: #34a853; --csw-success: #2b8c45; /* Menu no AZUL VIVO da logo (o mesmo do arco, 1 tom abaixo p/ leitura) e o item ativo no VERDE do cifrão — o par de cores do logotipo, sem timidez. */ --csw-aside: #1669c2; --csw-aside-sep: #2f86dd; --csw-aside-link: #eaf4ff; --csw-aside-hover: #2f86dd; --csw-aside-foot: #b7d9f8; --csw-aside-grp: #cfe6fb; --csw-aside-sub: #a8cef2; } /* --------------------------------------------------------------------- Utilitários TEMÁVEIS (CSS puro, não Twind). O Twind NÃO resolve var() dentro de classe arbitrária (bg-[var(--x)] sai sem cor) — por isso estas classes existem: são o único jeito de ligar os tokens do tema aos elementos pintados pelo app JS. --------------------------------------------------------------------- */ .csw-thead { background-color: var(--csw-thead); } .csw-thead-text { color: var(--csw-thead); } .csw-thead-border { border-color: var(--csw-thead); } .csw-thead-hover:hover { background-color: var(--csw-primary-700); } .csw-thead-grad { background-image: linear-gradient(to right, var(--csw-thead), var(--csw-primary-700)); } .csw-btn-green { background-color: var(--csw-green); color: #fff; } .csw-btn-green:hover { background-color: var(--csw-green-600); } /* Menu lateral temável (o app JS aplica estas classes no