/** * Sistema de Paletas de Cores - Portal Governamental * 6 Paletas distintivas e modernas (2025) * Acessíveis (WCAG 2.1 AA) e visualmente atraentes * * Uso: */ /* ============================================ PALETA 1: AZUL CONFIANÇA (Padrão) Azul sereno que transmite confiança e profissionalismo Ideal para: Portais governamentais, serviços públicos ============================================ */ [data-palette="azul-confianca"], :root:not([data-palette]) { /* Cores Principais */ --gov-blue-primary: #2563EB; --gov-blue-dark: #1E40AF; --gov-blue-darker: #1E3A8A; --gov-blue-light: #3B82F6; --gov-blue-lighter: #EFF6FF; /* Cinzas com tom azulado */ --gov-gray-darkest: #1E293B; --gov-gray-dark: #334155; --gov-gray-medium: #64748B; --gov-gray-light: #CBD5E1; --gov-gray-lighter: #E2E8F0; --gov-gray-lightest: #F8FAFC; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #059669; --gov-success-light: #D1FAE5; --gov-success-dark: #047857; --gov-warning: #D97706; --gov-warning-light: #FEF3C7; --gov-warning-dark: #B45309; --gov-danger: #DC2626; --gov-danger-light: #FEE2E2; --gov-danger-dark: #B91C1C; --gov-info: #0EA5E9; --gov-info-light: #E0F2FE; --gov-info-dark: #0284C7; /* Cores Neutras */ --gov-neutral-gray: #64748B; --gov-neutral-gray-light: #F1F5F9; --gov-neutral-gray-dark: #475569; --gov-amber: #B45309; --gov-amber-light: #FEF3C7; --gov-amber-dark: #92400E; --gov-blue-soft: #64748B; --gov-blue-soft-light: #F1F5F9; --gov-green-muted: #047857; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #F59E0B; --gov-gold-dark: #D97706; --gov-green: #10B981; --gov-green-dark: #059669; /* Sidebar - Azul profundo elegante */ --sidebar-bg-start: #1E3A8A; --sidebar-bg-end: #1E40AF; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #BFDBFE; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #2563EB; --sidebar-active-border: #FCD34D; /* Header */ --header-bg: #FFFFFF; --header-border: #2563EB; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* ============================================ PALETA 2: VERDE NATUREZA Verde floresta moderno, transmite sustentabilidade Ideal para: Meio ambiente, saúde, agricultura ============================================ */ [data-palette="verde-natureza"] { /* Cores Principais */ --gov-blue-primary: #059669; --gov-blue-dark: #047857; --gov-blue-darker: #065F46; --gov-blue-light: #10B981; --gov-blue-lighter: #ECFDF5; /* Cinzas com tom esverdeado */ --gov-gray-darkest: #1C2B22; --gov-gray-dark: #2D4A3E; --gov-gray-medium: #5F7A6E; --gov-gray-light: #A7C4B5; --gov-gray-lighter: #D1E7DD; --gov-gray-lightest: #F0FAF4; /* Branco com tom quente */ --gov-white: #FDFFFE; /* Cores de Status */ --gov-success: #16A34A; --gov-success-light: #DCFCE7; --gov-success-dark: #15803D; --gov-warning: #CA8A04; --gov-warning-light: #FEF9C3; --gov-warning-dark: #A16207; --gov-danger: #DC2626; --gov-danger-light: #FEE2E2; --gov-danger-dark: #B91C1C; --gov-info: #0891B2; --gov-info-light: #CFFAFE; --gov-info-dark: #0E7490; /* Cores Neutras */ --gov-neutral-gray: #5F7A6E; --gov-neutral-gray-light: #F0FAF4; --gov-neutral-gray-dark: #2D4A3E; --gov-amber: #A16207; --gov-amber-light: #FEF9C3; --gov-amber-dark: #854D0E; --gov-blue-soft: #5F7A6E; --gov-blue-soft-light: #F0FAF4; --gov-green-muted: #15803D; --gov-green-muted-light: #DCFCE7; /* Cores de Destaque */ --gov-gold: #EAB308; --gov-gold-dark: #CA8A04; --gov-green: #22C55E; --gov-green-dark: #16A34A; /* Sidebar - Verde floresta */ --sidebar-bg-start: #065F46; --sidebar-bg-end: #047857; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #A7F3D0; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #059669; --sidebar-active-border: #FCD34D; /* Header */ --header-bg: #FDFFFE; --header-border: #059669; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* ============================================ PALETA 3: MOCHA EXECUTIVO Marrom quente sofisticado (Tendência 2025) Ideal para: Finanças, jurídico, consultoria ============================================ */ [data-palette="mocha-executivo"] { /* Cores Principais */ --gov-blue-primary: #78716C; --gov-blue-dark: #44403C; --gov-blue-darker: #292524; --gov-blue-light: #A8A29E; --gov-blue-lighter: #FAFAF9; /* Cinzas quentes (stone) */ --gov-gray-darkest: #1C1917; --gov-gray-dark: #44403C; --gov-gray-medium: #78716C; --gov-gray-light: #D6D3D1; --gov-gray-lighter: #E7E5E4; --gov-gray-lightest: #FAFAF9; /* Branco quente */ --gov-white: #FFFBF5; /* Cores de Status */ --gov-success: #059669; --gov-success-light: #D1FAE5; --gov-success-dark: #047857; --gov-warning: #B45309; --gov-warning-light: #FFEDD5; --gov-warning-dark: #9A3412; --gov-danger: #B91C1C; --gov-danger-light: #FEE2E2; --gov-danger-dark: #991B1B; --gov-info: #7C6F64; --gov-info-light: #F5F5F4; --gov-info-dark: #57534E; /* Cores Neutras */ --gov-neutral-gray: #78716C; --gov-neutral-gray-light: #F5F5F4; --gov-neutral-gray-dark: #57534E; --gov-amber: #92400E; --gov-amber-light: #FFEDD5; --gov-amber-dark: #7C2D12; --gov-blue-soft: #78716C; --gov-blue-soft-light: #F5F5F4; --gov-green-muted: #047857; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque - Dourado/Cobre */ --gov-gold: #B45309; --gov-gold-dark: #92400E; --gov-green: #059669; --gov-green-dark: #047857; /* Sidebar - Mocha profundo */ --sidebar-bg-start: #292524; --sidebar-bg-end: #44403C; --sidebar-text: #FAFAF9; --sidebar-text-secondary: #D6D3D1; --sidebar-hover: rgba(255, 255, 255, 0.08); --sidebar-active-bg: #57534E; --sidebar-active-border: #D97706; /* Header */ --header-bg: #FFFBF5; --header-border: #78716C; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 4: ÍNDIGO PROFUNDO Índigo elegante e sofisticado Ideal para: Tecnologia, inovação, educação ============================================ */ [data-palette="indigo-profundo"] { /* Cores Principais */ --gov-blue-primary: #4F46E5; --gov-blue-dark: #3730A3; --gov-blue-darker: #312E81; --gov-blue-light: #6366F1; --gov-blue-lighter: #EEF2FF; /* Cinzas com tom índigo */ --gov-gray-darkest: #1E1B4B; --gov-gray-dark: #3730A3; --gov-gray-medium: #6B7280; --gov-gray-light: #C7D2FE; --gov-gray-lighter: #E0E7FF; --gov-gray-lightest: #F5F7FF; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #059669; --gov-success-light: #D1FAE5; --gov-success-dark: #047857; --gov-warning: #D97706; --gov-warning-light: #FEF3C7; --gov-warning-dark: #B45309; --gov-danger: #DC2626; --gov-danger-light: #FEE2E2; --gov-danger-dark: #B91C1C; --gov-info: #6366F1; --gov-info-light: #E0E7FF; --gov-info-dark: #4F46E5; /* Cores Neutras */ --gov-neutral-gray: #6B7280; --gov-neutral-gray-light: #F3F4F6; --gov-neutral-gray-dark: #4B5563; --gov-amber: #B45309; --gov-amber-light: #FEF3C7; --gov-amber-dark: #92400E; --gov-blue-soft: #6B7280; --gov-blue-soft-light: #F3F4F6; --gov-green-muted: #047857; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #F59E0B; --gov-gold-dark: #D97706; --gov-green: #10B981; --gov-green-dark: #059669; /* Sidebar - Índigo profundo */ --sidebar-bg-start: #312E81; --sidebar-bg-end: #3730A3; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #C7D2FE; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #4F46E5; --sidebar-active-border: #FBBF24; /* Header */ --header-bg: #FFFFFF; --header-border: #4F46E5; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* ============================================ PALETA 5: ARDÓSIA MODERNO Cinza-azulado premium e minimalista Ideal para: Corporativo, administração, gestão ============================================ */ [data-palette="ardosia-moderno"] { /* Cores Principais */ --gov-blue-primary: #475569; --gov-blue-dark: #334155; --gov-blue-darker: #1E293B; --gov-blue-light: #64748B; --gov-blue-lighter: #F1F5F9; /* Cinzas slate */ --gov-gray-darkest: #0F172A; --gov-gray-dark: #1E293B; --gov-gray-medium: #64748B; --gov-gray-light: #CBD5E1; --gov-gray-lighter: #E2E8F0; --gov-gray-lightest: #F8FAFC; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #059669; --gov-success-light: #D1FAE5; --gov-success-dark: #047857; --gov-warning: #D97706; --gov-warning-light: #FEF3C7; --gov-warning-dark: #B45309; --gov-danger: #DC2626; --gov-danger-light: #FEE2E2; --gov-danger-dark: #B91C1C; --gov-info: #0EA5E9; --gov-info-light: #E0F2FE; --gov-info-dark: #0284C7; /* Cores Neutras */ --gov-neutral-gray: #64748B; --gov-neutral-gray-light: #F1F5F9; --gov-neutral-gray-dark: #475569; --gov-amber: #B45309; --gov-amber-light: #FEF3C7; --gov-amber-dark: #92400E; --gov-blue-soft: #64748B; --gov-blue-soft-light: #F1F5F9; --gov-green-muted: #047857; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque - Azul vibrante */ --gov-gold: #0EA5E9; --gov-gold-dark: #0284C7; --gov-green: #10B981; --gov-green-dark: #059669; /* Sidebar - Ardósia escuro */ --sidebar-bg-start: #0F172A; --sidebar-bg-end: #1E293B; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #94A3B8; --sidebar-hover: rgba(255, 255, 255, 0.08); --sidebar-active-bg: #334155; --sidebar-active-border: #0EA5E9; /* Header */ --header-bg: #FFFFFF; --header-border: #475569; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* ============================================ PALETA 6: TERRACOTA ACOLHEDOR Terracota quente e humanizado Ideal para: Social, cultura, comunidade ============================================ */ [data-palette="terracota-acolhedor"] { /* Cores Principais */ --gov-blue-primary: #C2410C; --gov-blue-dark: #9A3412; --gov-blue-darker: #7C2D12; --gov-blue-light: #EA580C; --gov-blue-lighter: #FFF7ED; /* Cinzas quentes */ --gov-gray-darkest: #292524; --gov-gray-dark: #44403C; --gov-gray-medium: #78716C; --gov-gray-light: #D6D3D1; --gov-gray-lighter: #E7E5E4; --gov-gray-lightest: #FAFAF9; /* Branco creme */ --gov-white: #FFFCF5; /* Cores de Status */ --gov-success: #059669; --gov-success-light: #D1FAE5; --gov-success-dark: #047857; --gov-warning: #D97706; --gov-warning-light: #FEF3C7; --gov-warning-dark: #B45309; --gov-danger: #B91C1C; --gov-danger-light: #FEE2E2; --gov-danger-dark: #991B1B; --gov-info: #C2410C; --gov-info-light: #FFEDD5; --gov-info-dark: #9A3412; /* Cores Neutras */ --gov-neutral-gray: #78716C; --gov-neutral-gray-light: #F5F5F4; --gov-neutral-gray-dark: #57534E; --gov-amber: #92400E; --gov-amber-light: #FFEDD5; --gov-amber-dark: #7C2D12; --gov-blue-soft: #78716C; --gov-blue-soft-light: #F5F5F4; --gov-green-muted: #047857; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #D97706; --gov-gold-dark: #B45309; --gov-green: #059669; --gov-green-dark: #047857; /* Sidebar - Terracota profundo */ --sidebar-bg-start: #7C2D12; --sidebar-bg-end: #9A3412; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #FED7AA; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #C2410C; --sidebar-active-border: #FCD34D; /* Header */ --header-bg: #FFFCF5; --header-border: #C2410C; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 7: GELO NOTURNO Monocromático minimalista com tons frios Ideal para: Gestão moderna, tecnologia, design ============================================ */ [data-palette="gelo-noturno"] { /* Cores Principais - Obsidian */ --gov-blue-primary: #18181B; --gov-blue-dark: #09090B; --gov-blue-darker: #000000; --gov-blue-light: #27272A; --gov-blue-lighter: #F1F5F9; /* Cinzas - Zinc scale */ --gov-gray-darkest: #18181B; --gov-gray-dark: #3F3F46; --gov-gray-medium: #71717A; --gov-gray-light: #A1A1AA; --gov-gray-lighter: #D4D4D8; --gov-gray-lightest: #F4F4F5; /* Branco */ --gov-white: #FAFAFA; /* Status - Tons neutros (monocromático) */ --gov-success: #52525B; --gov-success-light: #E4E4E7; --gov-success-dark: #3F3F46; --gov-warning: #71717A; --gov-warning-light: #F4F4F5; --gov-warning-dark: #52525B; --gov-danger: #27272A; --gov-danger-light: #E4E4E7; --gov-danger-dark: #18181B; --gov-info: #94A3B8; --gov-info-light: #F1F5F9; --gov-info-dark: #64748B; /* Cores Neutras */ --gov-neutral-gray: #71717A; --gov-neutral-gray-light: #F4F4F5; --gov-neutral-gray-dark: #52525B; --gov-amber: #52525B; --gov-amber-light: #E4E4E7; --gov-amber-dark: #3F3F46; --gov-blue-soft: #94A3B8; --gov-blue-soft-light: #F1F5F9; --gov-green-muted: #52525B; --gov-green-muted-light: #E4E4E7; /* Cores de Destaque - Monocromático */ --gov-gold: #71717A; --gov-gold-dark: #52525B; --gov-green: #52525B; --gov-green-dark: #3F3F46; /* Sidebar - Obsidian elegante */ --sidebar-bg-start: #18181B; --sidebar-bg-end: #27272A; --sidebar-text: #FAFAFA; --sidebar-text-secondary: #A1A1AA; --sidebar-hover: rgba(255, 255, 255, 0.08); --sidebar-active-bg: #3F3F46; --sidebar-active-border: #FAFAFA; /* Header */ --header-bg: #FAFAFA; --header-border: #18181B; --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ============================================ TRANSIÇÕES SUAVES ============================================ */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Elementos que não devem ter transição */ .no-transition, .no-transition *, input[type="range"], progress { transition: none !important; } /* ============================================ ACESSIBILIDADE Garantir contraste adequado em todos os estados ============================================ */ /* Garantir que textos sobre fundos coloridos tenham contraste adequado */ .badge, .status-badge, button:not(.secondary) { font-weight: 600; } /* Aumentar contraste de links no hover */ a:hover { filter: brightness(0.9); }