/* ============================================================ variaveis.css — PALETA E TOKENS DO SISTEMA Local: /assets/css/variaveis.css Tema: Oficina 500 — Verde (TRAVADO v1.0) Aprovado em: Junho 2026 ⚡ PARA TROCAR O TEMA DO SISTEMA: Altere apenas as variáveis marcadas com ← TEMA O restante do sistema se adapta automaticamente. ============================================================ */ :root { /* ---------------------------------------------------------- CORES DO TEMA ← edite estas para trocar o visual inteiro Tema atual: Oficina 500 — Verde ---------------------------------------------------------- */ --cor-primaria: #1C3A2C; /* ← TEMA: Verde Escuro (botões, links, ativos, headers) */ --cor-primaria-hover: #132A1E; /* ← TEMA: hover da primária */ --cor-primaria-light: #E7EFE9; /* ← TEMA: fundo suave primária (verde suave) */ --cor-primaria-rgb: 28,58,44; /* ← TEMA: versão RGB para rgba() */ --cor-secundaria: #3F7D5A; /* ← TEMA: Verde Sálvia (CTA, badges, destaques, links) */ --cor-secundaria-hover:#34694B; /* ← TEMA: hover da secundária */ --cor-secundaria-light:#E4F0E9; /* ← TEMA: fundo suave secundária */ --cor-secundaria-rgb: 63,125,90; /* ← TEMA: versão RGB para rgba() */ /* ---------------------------------------------------------- CORES FIXAS — não mudam com o tema ---------------------------------------------------------- */ --cor-sucesso: #16a34a; --cor-sucesso-light: #f0fdf4; --cor-sucesso-rgb: 22,163,74; --cor-alerta: #d97706; --cor-alerta-light: #fffbeb; --cor-alerta-rgb: 217,119,6; --cor-erro: #dc2626; --cor-erro-light: #fef2f2; --cor-erro-rgb: 220,38,38; --cor-info: #0891b2; --cor-info-light: #ecfeff; --cor-info-rgb: 8,145,178; /* ---------------------------------------------------------- TONS DE CINZA — base do light mode ---------------------------------------------------------- */ --cinza-50: #f8fafc; --cinza-100: #f1f5f9; --cinza-200: #e2e8f0; --cinza-300: #cbd5e1; --cinza-400: #94a3b8; --cinza-500: #64748b; --cinza-600: #475569; --cinza-700: #334155; --cinza-800: #1e293b; --cinza-900: #0f172a; /* ---------------------------------------------------------- SUPERFÍCIES E FUNDOS ---------------------------------------------------------- */ --fundo-app: #F4F1E9; /* Marfim — fundo geral da página */ --fundo-sidebar: #ffffff; /* sidebar sempre branca */ --fundo-topbar: rgba(240,236,226,.90);/* topbar marfim semitransparente */ --fundo-card: #ffffff; /* cards brancos (sem transparência) */ --fundo-card-solid: #ffffff; /* card sem transparência */ --fundo-input: #ffffff; /* inputs sempre brancos */ --fundo-hover: #fafaf8; /* hover de linhas/itens (off-white quente) */ --fundo-ativo: #E7EFE9; /* item ativo no menu (verde suave) */ /* ---------------------------------------------------------- TEXTOS ---------------------------------------------------------- */ --texto-titulo: #0f172a; /* títulos h1–h3 */ --texto-corpo: #334155; /* texto corrido */ --texto-suave: #8C8F8A; /* labels, placeholders (Cinza Pedra da marca) */ --texto-desativo: var(--cinza-400); /* texto desabilitado */ --texto-inverso: #F4F1E9; /* texto sobre cor primária (marfim, não branco) */ --texto-link: #3F7D5A; /* links (verde sálvia) */ /* ---------------------------------------------------------- BORDAS ---------------------------------------------------------- */ --borda: #e2e8f0; /* borda padrão */ --borda-forte: #cbd5e1; /* borda com destaque */ --borda-input: #e2e8f0; /* borda de input */ --borda-focus: #1C3A2C; /* borda no focus (verde escuro) */ --borda-ghost: #B8D0BC; /* borda botão ghost (verde acinzentado) */ /* ---------------------------------------------------------- SOMBRAS ---------------------------------------------------------- */ --sombra-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --sombra-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04); --sombra-lg: 0 10px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05); --sombra-xl: 0 20px 60px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.06); --sombra-primaria: 0 4px 20px rgba(28,58,44,.25); --sombra-secundaria: 0 4px 20px rgba(63,125,90,.30); --sombra-focus: 0 0 0 3px rgba(28,58,44,.12); /* focus ring verde */ /* ---------------------------------------------------------- GLASSMORPHISM ---------------------------------------------------------- */ --glass-bg: rgba(255,255,255,.72); --glass-border: rgba(255,255,255,.55); --glass-blur: blur(16px); --glass-shadow: 0 8px 32px rgba(0,0,0,.08); /* ---------------------------------------------------------- CARDS MÉTRICOS — padrão aprovado: filete + badge ---------------------------------------------------------- */ --card-metrico-bg: #ffffff; --card-metrico-borda: #e2e8f0; --card-metrico-radius: 0 10px 10px 0; /* cantos direitos arredondados */ --card-metrico-filete-p: #1C3A2C; /* filete primário (verde escuro) */ --card-metrico-filete-s: #3F7D5A; /* filete secundário (sálvia) */ --card-metrico-filete-a: #d97706; /* filete alerta (âmbar) */ --card-metrico-filete-n: #8C8F8A; /* filete neutro (cinza) */ --card-metrico-label: #8C8F8A; --card-metrico-valor: #0f172a; --card-metrico-badge-p-bg: #E7EFE9; --card-metrico-badge-p-txt: #1C3A2C; --card-metrico-badge-s-bg: #E4F0E9; --card-metrico-badge-s-txt: #3F7D5A; --card-metrico-badge-a-bg: #fffbeb; --card-metrico-badge-a-txt: #92400e; --card-metrico-badge-n-bg: #f1f5f9; --card-metrico-badge-n-txt: #475569; /* ---------------------------------------------------------- BOTÕES — padrão aprovado ---------------------------------------------------------- */ /* Primário: verde escuro sólido, texto marfim */ --btn-p-bg: #1C3A2C; --btn-p-txt: #F4F1E9; --btn-p-hover: #132A1E; /* Ghost / Cancelar: fundo verde suave, borda verde acinzentado, texto verde escuro */ --btn-g-bg: #E7EFE9; --btn-g-txt: #1C3A2C; --btn-g-borda: #B8D0BC; --btn-g-hover: #D4E8D9; /* ---------------------------------------------------------- TABELA — padrão aprovado ---------------------------------------------------------- */ --tabela-th-bg: #fafaf8; /* cabeçalho off-white quente */ --tabela-th-txt: #8C8F8A; --tabela-td-bg: #ffffff; /* linhas sempre brancas */ --tabela-td-txt: #334155; --tabela-borda: #f1f5f9; /* divisória entre linhas (muito suave) */ --tabela-hover: #fafaf8; /* Status badges de tabela */ --status-ok-bg: #E7EFE9; --status-ok-txt: #1C3A2C; --status-pen-bg: #fffbeb; --status-pen-txt: #92400e; --status-at-bg: #fef2f2; --status-at-txt: #991b1b; /* ---------------------------------------------------------- FORMULÁRIOS — padrão aprovado ---------------------------------------------------------- */ --form-label-txt: #8C8F8A; --form-input-bg: #ffffff; --form-input-txt: #334155; --form-input-borda: #e2e8f0; --form-input-focus: #1C3A2C; --form-input-shadow: 0 0 0 3px rgba(28,58,44,.10); /* ---------------------------------------------------------- TIPOGRAFIA — fonte oficial: Montserrat ---------------------------------------------------------- */ --fonte-sans: 'Montserrat', 'Inter', system-ui, sans-serif; --fonte-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Escala aprovada no mockup */ --text-xs: 9px; /* labels, badges, cabeçalho de tabela, nav-sec */ --text-sm: 10px; /* CNPJ/CPF, form-label, hora da atividade */ --text-base: 11px; /* inputs, td, atividade, nome-lateral */ --text-md: 12px; /* itens do menu, botões, card-title, tb-search */ --text-lg: 13px; /* logo, nome do usuário */ --text-xl: 15px; /* título da página (topbar) */ --text-2xl: 18px; /* valor dos cards métricos */ --text-3xl: 24px; /* títulos de destaque (uso futuro) */ --text-4xl: 30px; /* display (uso futuro) */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700; /* ---------------------------------------------------------- RAIOS DE BORDA ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; /* inputs, botões */ --radius-lg: 10px; /* cards */ --radius-xl: 14px; /* painéis maiores, container principal */ --radius-pill: 999px; /* badges, status, tags */ /* ---------------------------------------------------------- ESPAÇAMENTO (escala de 4px) ---------------------------------------------------------- */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-16: 64px; /* ---------------------------------------------------------- LAYOUT — SIDEBAR + TOPBAR ---------------------------------------------------------- */ --sidebar-largura: 200px; /* aprovado no mockup */ --sidebar-largura-mini: 60px; /* sidebar recolhida */ --topbar-altura: 52px; /* aprovado no mockup */ /* ---------------------------------------------------------- TRANSIÇÕES ---------------------------------------------------------- */ --transicao: .18s ease; --transicao-lenta: .32s ease; /* ---------------------------------------------------------- Z-INDEX (camadas) ---------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sidebar: 200; --z-topbar: 300; --z-modal: 400; --z-toast: 500; }