/* ===================================================================== CertSafe - Tokens de design (paleta, espacamento, raios, sombras) Arquivo: assets/css/tokens.css Fonte unica de verdade para variaveis visuais. Importado por todas as folhas de estilo da aplicacao (login.css, app.css, components.css, dashboard.css) para evitar duplicacao e garantir consistencia. Estrutura: 1. Paleta crua (nao muda com o tema - identidade visual da marca) 2. Tokens semanticos (mudam de valor entre tema claro/escuro) 3. Efeito vidro (glassmorphism) e gradientes de apoio ===================================================================== */ :root { /* ----------------------------------------------------------------- 1. Paleta crua - identidade visual (navy + teal), nao varia com o tema. Usada por elementos sempre "de marca" como a barra lateral, botoes primarios e badges de status. ----------------------------------------------------------------- */ --cs-navy-900: #071427; --cs-navy-800: #0B1F3D; --cs-navy-700: #16315A; --cs-navy-600: #2A4566; --cs-navy-500: #3C5E89; --cs-slate-500: #5B6B82; --cs-slate-400: #8593A8; --cs-slate-300: #A6B1C2; --cs-slate-200: #D7DEE8; --cs-slate-100: #EEF2F8; --cs-bg-light: #F4F7FB; --cs-white: #FFFFFF; --cs-teal-700: #00695F; --cs-teal-600: #00897E; --cs-teal-500: #00B8A9; --cs-teal-400: #2BD1C0; --cs-teal-300: #4FE3D1; --cs-teal-100: #E3FBF7; /* Acentos adicionais (cores de apoio para diferenciar modulos e gerar mais vida visual sem abandonar a identidade navy + teal) */ --cs-violeta-500: #7C6FE3; --cs-violeta-100: #EFEBFD; --cs-azul-500: #3B82F6; --cs-azul-100: #EAF1FF; --cs-coral-500: #F2685C; --cs-coral-100: #FDEAE8; --cs-ambar-500: #F5A524; --cs-ambar-100: #FEF3E2; /* Estados semanticos */ --cs-success-600: #15803D; --cs-success-500: #16A34A; --cs-success-bg: #E9F8EF; --cs-warning-600: #B45309; --cs-warning-500: #F59E0B; --cs-warning-bg: #FEF3E2; --cs-danger-600: #B91C1C; --cs-danger-500: #DC2626; --cs-danger-bg: #FDECEC; --cs-info-600: #1D4ED8; --cs-info-500: #3B82F6; --cs-info-bg: #EAF1FF; /* Gradientes de marca, usados em destaques (login, cabecalhos de cartao, sidebar) */ --cs-gradiente-marca: linear-gradient(135deg, var(--cs-navy-800) 0%, var(--cs-navy-900) 55%, #042A38 100%); --cs-gradiente-acento: linear-gradient(135deg, var(--cs-teal-500) 0%, var(--cs-azul-500) 100%); --cs-gradiente-aurora: radial-gradient(circle at 15% 20%, rgba(0, 184, 169, 0.55) 0%, transparent 45%), radial-gradient(circle at 85% 10%, rgba(124, 111, 227, 0.45) 0%, transparent 45%), radial-gradient(circle at 50% 90%, rgba(59, 130, 246, 0.35) 0%, transparent 50%); /* Raios e sombras */ --cs-raio-sm: 8px; --cs-raio-md: 14px; --cs-raio-lg: 22px; --cs-sombra-cartao: 0 24px 60px -20px rgba(11, 31, 61, 0.25), 0 4px 16px -4px rgba(11, 31, 61, 0.08); --cs-sombra-flutuante: 0 12px 28px -8px rgba(11, 31, 61, 0.18); /* Transicoes */ --cs-transicao-rapida: 160ms cubic-bezier(0.4, 0, 0.2, 1); --cs-transicao-media: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* Estrutura do painel autenticado */ --cs-largura-sidebar: 264px; --cs-largura-sidebar-recolhida: 76px; --cs-altura-topbar: 68px; /* ----------------------------------------------------------------- 2. Tokens semanticos - TEMA CLARO (padrao) Usados por componentes (cartoes, tabelas, modais, formularios) em vez dos tokens crus acima, para que o mesmo CSS funcione nos dois temas apenas trocando estes valores. ----------------------------------------------------------------- */ --cs-fundo-pagina: var(--cs-bg-light); --cs-superficie: var(--cs-white); --cs-superficie-alternativa: var(--cs-slate-100); --cs-superficie-hover: var(--cs-slate-100); --cs-texto-primario: var(--cs-navy-800); --cs-texto-secundario: var(--cs-slate-500); --cs-borda: var(--cs-slate-200); --cs-borda-sutil: var(--cs-slate-100); --cs-overlay-modal: rgba(7, 20, 39, 0.45); /* Efeito vidro (glassmorphism) - tema claro: vidro claro sobre fundos com gradiente/cor (sidebar, topo, login) */ --cs-vidro-fundo: rgba(255, 255, 255, 0.62); --cs-vidro-fundo-forte: rgba(255, 255, 255, 0.78); --cs-vidro-borda: rgba(255, 255, 255, 0.45); --cs-vidro-sombra: 0 8px 32px rgba(11, 31, 61, 0.12); --cs-vidro-blur: 18px; /* Vidro escuro - usado sobre a sidebar/topbar navy em ambos os temas (ex.: dropdown do usuario, painel de notificacoes) */ --cs-vidro-escuro-fundo: rgba(11, 31, 61, 0.55); --cs-vidro-escuro-borda: rgba(255, 255, 255, 0.12); } /* ===================================================================== TEMA ESCURO Ativado via atributo data-tema="escuro" na tag . Apenas os tokens semanticos mudam; a paleta crua e a identidade de marca (navy + teal) permanecem as mesmas. ===================================================================== */ html[data-tema="escuro"] { --cs-fundo-pagina: #0A1626; --cs-superficie: #11203A; --cs-superficie-alternativa: #16294A; --cs-superficie-hover: #1A2F54; --cs-texto-primario: #EAF1FB; --cs-texto-secundario: #94A6C4; --cs-borda: #233A5E; --cs-borda-sutil: #1A2C4A; --cs-overlay-modal: rgba(2, 8, 18, 0.65); --cs-success-bg: rgba(22, 163, 74, 0.16); --cs-warning-bg: rgba(245, 158, 11, 0.16); --cs-danger-bg: rgba(220, 38, 38, 0.18); --cs-info-bg: rgba(59, 130, 246, 0.16); --cs-teal-100: rgba(0, 184, 169, 0.16); --cs-violeta-100: rgba(124, 111, 227, 0.18); --cs-azul-100: rgba(59, 130, 246, 0.16); --cs-coral-100: rgba(242, 104, 92, 0.18); --cs-ambar-100: rgba(245, 165, 36, 0.18); --cs-vidro-fundo: rgba(17, 32, 58, 0.55); --cs-vidro-fundo-forte: rgba(17, 32, 58, 0.78); --cs-vidro-borda: rgba(255, 255, 255, 0.08); --cs-vidro-sombra: 0 8px 32px rgba(0, 0, 0, 0.45); --cs-sombra-cartao: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 4px 16px -4px rgba(0, 0, 0, 0.35); --cs-sombra-flutuante: 0 12px 28px -8px rgba(0, 0, 0, 0.45); }