/* ========================================================================== AMBC - Variáveis Globais do Sistema Arquivo: css/base/variaveis.css Descrição: Define tokens de design (cores, fontes, espaçamentos, etc.) Versão: 2.0 — Sincronizado com HTML de referência ========================================================================== */ :root { /* ============================================ 🎨 CORES — PALETA PRIMÁRIA (Azul Corporativo) ============================================ */ --cor-primaria: #1a73e8; /* Azul principal */ --cor-primaria-hover: #1557b0; /* Hover em botões/links */ --cor-primaria-ativa: #0f3d7a; /* Estado pressionado */ --cor-primaria-clara: #e8f0fe; /* Fundos suaves, destaques */ --cor-primaria-palida: #f0f6ff; /* Fundo muito sutil (hover tabs) */ --cor-primaria-contraste: #FFFFFF; /* Texto sobre azul */ /* ============================================ 🎨 CORES — NEUTRAS (Cinzas / Slate) ============================================ */ --cor-branco: #FFFFFF; --cor-cinza-50: #f8fafc; /* Fundo de seções muito claro */ --cor-cinza-100: #f1f5f9; /* Fundo geral da aplicação */ --cor-cinza-200: #e2e8f0; /* Bordas padrão */ --cor-cinza-300: #cbd5e1; /* Bordas de inputs */ --cor-cinza-400: #94a3b8; /* Placeholder / texto desabilitado */ --cor-cinza-500: #64748b; /* Texto secundário */ --cor-cinza-600: #475569; /* Texto padrão */ --cor-cinza-700: #334155; /* Títulos secundários */ --cor-cinza-800: #1e293b; /* Títulos principais */ --cor-cinza-900: #0f172a; /* Texto de alto contraste */ /* Aliases semânticos para texto (facilita leitura do código) */ --texto-principal: var(--cor-cinza-900); --texto-secundario: var(--cor-cinza-600); --texto-suave: var(--cor-cinza-400); /* Aliases de fundo */ --fundo-pagina: var(--cor-cinza-100); --fundo-card: var(--cor-branco); --fundo-secao: #fafbfc; /* Aliases de compatibilidade (usados em páginas de cadastro) */ --cor-borda: var(--cor-cinza-200); --cor-fundo: var(--cor-cinza-50); --cor-fundo-suave: var(--fundo-secao); --cor-texto-principal: var(--texto-principal); --cor-texto-secundario: var(--texto-secundario); /* ============================================ 🎨 CORES — FEEDBACK / ESTADOS ============================================ */ --cor-sucesso: #16a34a; /* Verde — operações OK */ --cor-sucesso-clara: #dcfce7; --cor-sucesso-escura: #15803d; --cor-alerta: #ca8a04; /* Amarelo/Laranja — atenção */ --cor-alerta-clara: #fef9c3; --cor-alerta-escura: #a16207; --cor-erro: #dc2626; /* Vermelho — erros */ --cor-erro-clara: #fee2e2; --cor-erro-escura: #b91c1c; --cor-info: #3b82f6; /* Azul claro — informações */ --cor-info-clara: #dbeafe; --cor-info-escura: #1d4ed8; --cor-roxo: #7c3aed; /* Roxo — categorias especiais */ --cor-roxo-clara: #f3e8ff; --cor-teal: #0f766e; /* Teal — parceiros */ --cor-teal-clara: #ccfbf1; /* ============================================ 🔤 TIPOGRAFIA ============================================ */ --fonte-principal: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fonte-mono: 'Courier New', Courier, monospace; /* Tamanhos de fonte */ --fs-xs: 0.75rem; /* 12px — legendas */ --fs-sm: 0.875rem; /* 14px — texto auxiliar */ --fs-base: 1rem; /* 16px — texto padrão */ --fs-md: 1.125rem; /* 18px — subtítulos */ --fs-lg: 1.25rem; /* 20px — títulos menores */ --fs-xl: 1.5rem; /* 24px — títulos de seção */ --fs-2xl: 1.875rem; /* 30px — títulos de página */ --fs-3xl: 2.25rem; /* 36px — destaques */ /* Pesos de fonte */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Altura de linha */ --lh-tight: 1.2; --lh-base: 1.5; --lh-relaxed: 1.75; /* ============================================ 📏 ESPAÇAMENTOS (Sistema de 4px) ============================================ */ --esp-xs: 0.25rem; /* 4px */ --esp-sm: 0.5rem; /* 8px */ --esp-md: 1rem; /* 16px */ --esp-lg: 1.5rem; /* 24px */ --esp-xl: 2rem; /* 32px */ --esp-2xl: 3rem; /* 48px */ --esp-3xl: 4rem; /* 64px */ /* ============================================ 🔲 BORDAS E RAIOS ============================================ */ --raio-sm: 7px; /* Botões, badges, inputs */ --raio-md: 10px; /* Padrão de cards */ --raio-lg: 14px; /* Cards maiores, modais */ --raio-xl: 16px; --raio-full: 9999px; /* Pílulas/círculos */ --borda-padrao: 1px solid var(--cor-cinza-200); --borda-input: 1px solid var(--cor-cinza-200); --borda-foco: 2px solid var(--cor-primaria); /* ============================================ 🌑 SOMBRAS ============================================ */ --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05); --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --sombra-lg: 0 10px 30px rgba(0, 0, 0, 0.10); --sombra-xl: 0 20px 60px rgba(0, 0, 0, 0.20); --sombra-foco: 0 0 0 3px rgba(26, 115, 232, 0.20); --sombra-marca: 0 2px 8px rgba(26, 115, 232, 0.35); /* ============================================ 📐 LAYOUT (dimensões fixas do sistema) ============================================ */ --altura-header: 56px; --largura-sidebar: 248px; --largura-sidebar-fechada: 72px; --largura-max-conteudo: 1400px; /* ============================================ 🌑 TEMA (referência — sobrescrito em [data-tema="escuro"]) ============================================ */ --cor-sidebar-fundo: #1e293b; --cor-sidebar-texto: #cbd5e1; --cor-sidebar-ativo: rgba(255,255,255,0.08); --cor-topbar-fundo: var(--cor-branco); --cor-topbar-borda: var(--cor-cinza-200); /* ============================================ ⏱️ TRANSIÇÕES E ANIMAÇÕES ============================================ */ --transicao-rapida: 120ms ease; --transicao-padrao: 150ms ease; --transicao-lenta: 250ms ease; /* ============================================ 🗂️ Z-INDEX (camadas de sobreposição) ============================================ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-sidebar: 550; --z-overlay: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; } /* ========================================================================== MODO ESCURO Ativado via document.documentElement.dataset.tema = "escuro" ========================================================================== */ [data-tema="escuro"] { --fundo-pagina: #0f172a; --fundo-card: #1e293b; --fundo-secao: #1e293b; --cor-cinza-50: #1e293b; --cor-cinza-100: #0f172a; --cor-cinza-200: #334155; --cor-cinza-300: #475569; --cor-cinza-400: #64748b; --cor-cinza-500: #94a3b8; --cor-cinza-600: #cbd5e1; --cor-cinza-700: #e2e8f0; --cor-cinza-800: #f1f5f9; --cor-cinza-900: #f8fafc; --texto-principal: #f1f5f9; --texto-secundario: #94a3b8; --texto-suave: #64748b; --borda-padrao: 1px solid #334155; --borda-input: 1px solid #334155; --cor-primaria-clara: rgba(26, 115, 232, 0.15); --cor-primaria-palida: rgba(26, 115, 232, 0.08); --cor-sucesso-clara: rgba(22, 163, 74, 0.15); --cor-erro-clara: rgba(220, 38, 38, 0.15); --cor-alerta-clara: rgba(202, 138, 4, 0.15); --cor-info-clara: rgba(59, 130, 246, 0.15); --cor-roxo-clara: rgba(124, 58, 237, 0.15); --cor-teal-clara: rgba(15, 118, 110, 0.15); --cor-topbar-fundo: #1e293b; --cor-topbar-borda: #334155; --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); --sombra-lg: 0 10px 30px rgba(0, 0, 0, 0.5); }