/** * Sistema de Paletas de Cores Governamentais * Sistema de Ponto Eletrônico com Reconhecimento Facial * * 7 Paletas pré-configuradas com cores suaves e acessíveis (WCAG 2.1 AA) * Aplicação via atributo data-palette no elemento * * Uso: */ /* ============================================ PALETA 1: AZUL INSTITUCIONAL GOV.BR (Padrão) Baseada no design system oficial do governo brasileiro ============================================ */ [data-palette="azul-govbr"], :root:not([data-palette]) { /* Cores Principais */ --gov-blue-primary: #5B9BD5; --gov-blue-dark: #071D41; --gov-blue-darker: #0C326F; --gov-blue-light: #6BA3E0; --gov-blue-lighter: #E8F4FD; /* Cinzas */ --gov-gray-darkest: #333333; --gov-gray-dark: #555555; --gov-gray-medium: #666666; --gov-gray-light: #CCCCCC; --gov-gray-lighter: #DDDDDD; --gov-gray-lightest: #F8F8F8; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #168821; --gov-success-light: #E8F5E9; --gov-success-dark: #0F5A15; --gov-warning: #FF8C00; --gov-warning-light: #FFF3E0; --gov-warning-dark: #E67E00; --gov-danger: #DC3545; --gov-danger-light: #FFEBEE; --gov-danger-dark: #C62828; --gov-info: #5B9BD5; --gov-info-light: #E3F2FD; --gov-info-dark: #0D47A1; /* Cores Neutras */ --gov-neutral-gray: #6C757D; --gov-neutral-gray-light: #F8F9FA; --gov-neutral-gray-dark: #495057; --gov-amber: #856404; --gov-amber-light: #FFF8E1; --gov-amber-dark: #6C4E03; --gov-blue-soft: #5A6C7D; --gov-blue-soft-light: #E8EDF2; --gov-green-muted: #0F5A15; --gov-green-muted-light: #E8F5E9; /* Cores de Destaque */ --gov-gold: #FFC107; --gov-gold-dark: #C5A572; --gov-green: #009B3A; --gov-green-dark: #007A2F; /* Sidebar */ --sidebar-bg-start: #2C3E50; --sidebar-bg-end: #34495E; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #B8BDC8; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #5B9BD5; --sidebar-active-border: #FFC107; /* Header */ --header-bg: #FFFFFF; --header-border: #5B9BD5; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 2: VERDE GOVERNAMENTAL Tom verde-floresta suave + cinzas neutros ============================================ */ [data-palette="verde-governamental"] { /* Cores Principais */ --gov-blue-primary: #2D7A4F; --gov-blue-dark: #1B4D32; --gov-blue-darker: #154028; --gov-blue-light: #3D9A66; --gov-blue-lighter: #E8F5EC; /* Cinzas */ --gov-gray-darkest: #2D2D2D; --gov-gray-dark: #4A4A4A; --gov-gray-medium: #6B6B6B; --gov-gray-light: #C8C8C8; --gov-gray-lighter: #E0E0E0; --gov-gray-lightest: #F5F5F5; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #168821; --gov-success-light: #E8F5E9; --gov-success-dark: #0F5A15; --gov-warning: #D97706; --gov-warning-light: #FEF3C7; --gov-warning-dark: #B45309; --gov-danger: #B91C1C; --gov-danger-light: #FEE2E2; --gov-danger-dark: #7F1D1D; --gov-info: #2D7A4F; --gov-info-light: #D1FAE5; --gov-info-dark: #065F46; /* Cores Neutras */ --gov-neutral-gray: #6B7280; --gov-neutral-gray-light: #F3F4F6; --gov-neutral-gray-dark: #4B5563; --gov-amber: #92400E; --gov-amber-light: #FEF3C7; --gov-amber-dark: #78350F; --gov-blue-soft: #5A6C5D; --gov-blue-soft-light: #E8F2EC; --gov-green-muted: #14532D; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #D97706; --gov-gold-dark: #B45309; --gov-green: #059669; --gov-green-dark: #047857; /* Sidebar */ --sidebar-bg-start: #1F3A29; --sidebar-bg-end: #2D5A3D; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #B8D4C3; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #2D7A4F; --sidebar-active-border: #D97706; /* Header */ --header-bg: #FFFFFF; --header-border: #2D7A4F; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 3: NEUTRO PROFISSIONAL Cinzas azulados + azul discreto de destaque ============================================ */ [data-palette="neutro-profissional"] { /* Cores Principais */ --gov-blue-primary: #4A5568; --gov-blue-dark: #1A202C; --gov-blue-darker: #0F1419; --gov-blue-light: #718096; --gov-blue-lighter: #F7FAFC; /* Cinzas */ --gov-gray-darkest: #1A202C; --gov-gray-dark: #2D3748; --gov-gray-medium: #4A5568; --gov-gray-light: #CBD5E0; --gov-gray-lighter: #E2E8F0; --gov-gray-lightest: #F7FAFC; /* 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: #991B1B; --gov-info: #3182CE; --gov-info-light: #DBEAFE; --gov-info-dark: #1E40AF; /* Cores Neutras */ --gov-neutral-gray: #6B7280; --gov-neutral-gray-light: #F3F4F6; --gov-neutral-gray-dark: #374151; --gov-amber: #92400E; --gov-amber-light: #FEF3C7; --gov-amber-dark: #78350F; --gov-blue-soft: #475569; --gov-blue-soft-light: #F1F5F9; --gov-green-muted: #065F46; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #F59E0B; --gov-gold-dark: #D97706; --gov-green: #10B981; --gov-green-dark: #059669; /* Sidebar */ --sidebar-bg-start: #1E293B; --sidebar-bg-end: #334155; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #CBD5E1; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #475569; --sidebar-active-border: #3182CE; /* Header */ --header-bg: #FFFFFF; --header-border: #475569; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 4: AZUL MARINHO EXECUTIVO Azul marinho profundo + azuis claros ============================================ */ [data-palette="azul-marinho"] { /* Cores Principais */ --gov-blue-primary: #1E3A8A; --gov-blue-dark: #0F172A; --gov-blue-darker: #020617; --gov-blue-light: #3B82F6; --gov-blue-lighter: #EFF6FF; /* Cinzas */ --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: #B91C1C; --gov-danger-light: #FEE2E2; --gov-danger-dark: #7F1D1D; --gov-info: #1E40AF; --gov-info-light: #DBEAFE; --gov-info-dark: #1E3A8A; /* Cores Neutras */ --gov-neutral-gray: #64748B; --gov-neutral-gray-light: #F1F5F9; --gov-neutral-gray-dark: #475569; --gov-amber: #92400E; --gov-amber-light: #FEF3C7; --gov-amber-dark: #78350F; --gov-blue-soft: #475569; --gov-blue-soft-light: #F1F5F9; --gov-green-muted: #065F46; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #FBBF24; --gov-gold-dark: #D97706; --gov-green: #10B981; --gov-green-dark: #059669; /* Sidebar */ --sidebar-bg-start: #0C1E3F; --sidebar-bg-end: #1E3A8A; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #BFDBFE; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #3B82F6; --sidebar-active-border: #FBBF24; /* Header */ --header-bg: #FFFFFF; --header-border: #1E3A8A; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 5: VERDE-OLIVA SÓBRIO Verde-oliva terroso + bege neutro ============================================ */ [data-palette="verde-oliva"] { /* Cores Principais */ --gov-blue-primary: #6B7A4A; --gov-blue-dark: #3D4426; --gov-blue-darker: #2A2F1A; --gov-blue-light: #8FA76B; --gov-blue-lighter: #F5F7F0; /* Cinzas */ --gov-gray-darkest: #2D2D2D; --gov-gray-dark: #4A4A4A; --gov-gray-medium: #6B6B6B; --gov-gray-light: #C8C8C8; --gov-gray-lighter: #E0E0E0; --gov-gray-lightest: #F9FAFB; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #4D7C0F; --gov-success-light: #ECFCCB; --gov-success-dark: #365314; --gov-warning: #CA8A04; --gov-warning-light: #FEF9C3; --gov-warning-dark: #854D0E; --gov-danger: #B91C1C; --gov-danger-light: #FEE2E2; --gov-danger-dark: #7F1D1D; --gov-info: #6B7A4A; --gov-info-light: #F5F7F0; --gov-info-dark: #3D4426; /* Cores Neutras */ --gov-neutral-gray: #78716C; --gov-neutral-gray-light: #F5F5F4; --gov-neutral-gray-dark: #57534E; --gov-amber: #92400E; --gov-amber-light: #FEF3C7; --gov-amber-dark: #78350F; --gov-blue-soft: #78716C; --gov-blue-soft-light: #F5F5F4; --gov-green-muted: #365314; --gov-green-muted-light: #ECFCCB; /* Cores de Destaque */ --gov-gold: #EAB308; --gov-gold-dark: #CA8A04; --gov-green: #65A30D; --gov-green-dark: #4D7C0F; /* Sidebar */ --sidebar-bg-start: #3D4426; --sidebar-bg-end: #52603A; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #D4D9C7; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #6B7A4A; --sidebar-active-border: #EAB308; /* Header */ --header-bg: #FFFFFF; --header-border: #6B7A4A; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 6: ROXO INSTITUCIONAL Roxo vibrante mas suave + lavanda ============================================ */ [data-palette="roxo-institucional"] { /* Cores Principais */ --gov-blue-primary: #7C3AED; --gov-blue-dark: #4C1D95; --gov-blue-darker: #2E1065; --gov-blue-light: #A78BFA; --gov-blue-lighter: #F5F3FF; /* Cinzas */ --gov-gray-darkest: #1F2937; --gov-gray-dark: #374151; --gov-gray-medium: #6B7280; --gov-gray-light: #D1D5DB; --gov-gray-lighter: #E5E7EB; --gov-gray-lightest: #F9FAFB; /* 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: #991B1B; --gov-info: #7C3AED; --gov-info-light: #EDE9FE; --gov-info-dark: #5B21B6; /* Cores Neutras */ --gov-neutral-gray: #6B7280; --gov-neutral-gray-light: #F3F4F6; --gov-neutral-gray-dark: #4B5563; --gov-amber: #92400E; --gov-amber-light: #FEF3C7; --gov-amber-dark: #78350F; --gov-blue-soft: #6B7280; --gov-blue-soft-light: #F3F4F6; --gov-green-muted: #065F46; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #F59E0B; --gov-gold-dark: #D97706; --gov-green: #10B981; --gov-green-dark: #059669; /* Sidebar */ --sidebar-bg-start: #3B1E6B; --sidebar-bg-end: #5B21B6; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #DDD6FE; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #7C3AED; --sidebar-active-border: #F59E0B; /* Header */ --header-bg: #FFFFFF; --header-border: #7C3AED; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 7: CINZA EXECUTIVO Cinzas neutros + azul como destaque ============================================ */ [data-palette="cinza-executivo"] { /* Cores Principais */ --gov-blue-primary: #6B7280; --gov-blue-dark: #111827; --gov-blue-darker: #030712; --gov-blue-light: #9CA3AF; --gov-blue-lighter: #F9FAFB; /* Cinzas */ --gov-gray-darkest: #111827; --gov-gray-dark: #1F2937; --gov-gray-medium: #6B7280; --gov-gray-light: #D1D5DB; --gov-gray-lighter: #E5E7EB; --gov-gray-lightest: #F9FAFB; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #10B981; --gov-success-light: #D1FAE5; --gov-success-dark: #059669; --gov-warning: #F59E0B; --gov-warning-light: #FEF3C7; --gov-warning-dark: #D97706; --gov-danger: #EF4444; --gov-danger-light: #FEE2E2; --gov-danger-dark: #DC2626; --gov-info: #3B82F6; --gov-info-light: #DBEAFE; --gov-info-dark: #2563EB; /* Cores Neutras */ --gov-neutral-gray: #6B7280; --gov-neutral-gray-light: #F3F4F6; --gov-neutral-gray-dark: #4B5563; --gov-amber: #92400E; --gov-amber-light: #FEF3C7; --gov-amber-dark: #78350F; --gov-blue-soft: #475569; --gov-blue-soft-light: #F1F5F9; --gov-green-muted: #065F46; --gov-green-muted-light: #D1FAE5; /* Cores de Destaque */ --gov-gold: #FBBF24; --gov-gold-dark: #F59E0B; --gov-green: #10B981; --gov-green-dark: #059669; /* Sidebar */ --sidebar-bg-start: #1F2937; --sidebar-bg-end: #374151; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #D1D5DB; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #4B5563; --sidebar-active-border: #3B82F6; /* Header */ --header-bg: #FFFFFF; --header-border: #6B7280; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 8: NEUTRO MINIMALISTA Máxima neutralidade - Cinza escuro até branco ============================================ */ [data-palette="neutro-minimalista"] { /* Cores Principais */ --gov-blue-primary: #555555; --gov-blue-dark: #2A2A2A; --gov-blue-darker: #1A1A1A; --gov-blue-light: #999999; --gov-blue-lighter: #F5F5F5; /* Cinzas */ --gov-gray-darkest: #222222; --gov-gray-dark: #444444; --gov-gray-medium: #666666; --gov-gray-light: #CCCCCC; --gov-gray-lighter: #E0E0E0; --gov-gray-lightest: #F8F8F8; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #10B981; --gov-success-light: #D1FAE5; --gov-success-dark: #059669; --gov-warning: #F59E0B; --gov-warning-light: #FEF3C7; --gov-warning-dark: #D97706; --gov-danger: #EF4444; --gov-danger-light: #FEE2E2; --gov-danger-dark: #DC2626; --gov-info: #666666; --gov-info-light: #F5F5F5; --gov-info-dark: #444444; /* Cores Neutras */ --gov-neutral-gray: #6B6B6B; --gov-neutral-gray-light: #F9F9F9; --gov-neutral-gray-dark: #4A4A4A; --gov-amber: #8B8B8B; --gov-amber-light: #F0F0F0; --gov-amber-dark: #5A5A5A; --gov-blue-soft: #707070; --gov-blue-soft-light: #F3F3F3; --gov-green-muted: #6B6B6B; --gov-green-muted-light: #EFEFEF; /* Cores de Destaque */ --gov-gold: #999999; --gov-gold-dark: #777777; --gov-green: #888888; --gov-green-dark: #666666; /* Sidebar */ --sidebar-bg-start: #2A2A2A; --sidebar-bg-end: #3A3A3A; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #CCCCCC; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #555555; --sidebar-active-border: #999999; /* Header */ --header-bg: #FFFFFF; --header-border: #CCCCCC; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 9: CAMPINA V2 Paleta institucional de Campina Grande Verde Bandeira + Verde Profundo + Amarelo Ouro ============================================ */ [data-palette="campina-v2"] { /* Cores Principais */ --gov-blue-primary: #008542; --gov-blue-dark: #1B4F3B; --gov-blue-darker: #0D2A1E; --gov-blue-light: #00A352; --gov-blue-lighter: #E8F5EC; /* Cinzas */ --gov-gray-darkest: #1A1A1A; --gov-gray-dark: #333333; --gov-gray-medium: #666666; --gov-gray-light: #CCCCCC; --gov-gray-lighter: #E5E5E5; --gov-gray-lightest: #F5F5F5; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #008542; --gov-success-light: #E8F5EC; --gov-success-dark: #006633; --gov-warning: #FFC700; --gov-warning-light: #FFF8E0; --gov-warning-dark: #D4A600; --gov-danger: #DC3545; --gov-danger-light: #FFEBEE; --gov-danger-dark: #B71C1C; --gov-info: #008542; --gov-info-light: #E8F5EC; --gov-info-dark: #1B4F3B; /* Cores Neutras */ --gov-neutral-gray: #6B7280; --gov-neutral-gray-light: #F3F4F6; --gov-neutral-gray-dark: #4B5563; --gov-amber: #D4A600; --gov-amber-light: #FFF8E0; --gov-amber-dark: #A68200; --gov-blue-soft: #4A6B5A; --gov-blue-soft-light: #E8F2EC; --gov-green-muted: #1B4F3B; --gov-green-muted-light: #E8F5EC; /* Cores de Destaque */ --gov-gold: #FFC700; --gov-gold-dark: #D4A600; --gov-green: #008542; --gov-green-dark: #006633; /* Sidebar */ --sidebar-bg-start: #1B4F3B; --sidebar-bg-end: #2A6B4F; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #C8E6D5; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #008542; --sidebar-active-border: #FFC700; /* Header */ --header-bg: #FFFFFF; --header-border: #008542; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 10: CAMPINA V1 Paleta institucional de Campina Grande Azul Institucional + Verde + Amarelo ============================================ */ [data-palette="campina-v1"] { /* Cores Principais */ --gov-blue-primary: #1B4F72; --gov-blue-dark: #2C3E50; --gov-blue-darker: #1A252F; --gov-blue-light: #2E6B8A; --gov-blue-lighter: #EBF5FB; /* Cinzas */ --gov-gray-darkest: #1A1A1A; --gov-gray-dark: #333333; --gov-gray-medium: #666666; --gov-gray-light: #CCCCCC; --gov-gray-lighter: #E5E5E5; --gov-gray-lightest: #FEF9E7; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #2E8B57; --gov-success-light: #E8F5EC; --gov-success-dark: #236B43; --gov-warning: #F39C12; --gov-warning-light: #FEF9E7; --gov-warning-dark: #D68910; --gov-danger: #DC3545; --gov-danger-light: #FFEBEE; --gov-danger-dark: #B71C1C; --gov-info: #1B4F72; --gov-info-light: #EBF5FB; --gov-info-dark: #154360; /* Cores Neutras */ --gov-neutral-gray: #6B7280; --gov-neutral-gray-light: #F3F4F6; --gov-neutral-gray-dark: #4B5563; --gov-amber: #D68910; --gov-amber-light: #FEF9E7; --gov-amber-dark: #B9770E; --gov-blue-soft: #5D6D7E; --gov-blue-soft-light: #EBF5FB; --gov-green-muted: #236B43; --gov-green-muted-light: #E8F5EC; /* Cores de Destaque */ --gov-gold: #F39C12; --gov-gold-dark: #D68910; --gov-green: #2E8B57; --gov-green-dark: #236B43; /* Sidebar */ --sidebar-bg-start: #2C3E50; --sidebar-bg-end: #1B4F72; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #AED6F1; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #1B4F72; --sidebar-active-border: #F39C12; /* Header */ --header-bg: #FFFFFF; --header-border: #1B4F72; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } /* ============================================ PALETA 11: CAMPINA SMART Paleta moderna de Campina Grande Verde Sálvia Metálico + Ouro Champagne ============================================ */ [data-palette="campina-smart"] { /* Cores Principais */ --gov-blue-primary: #4E866D; --gov-blue-dark: #3D6E57; --gov-blue-darker: #2D5242; --gov-blue-light: #76B096; --gov-blue-lighter: #FFFFFF; /* Cinzas (Prata Titânio - mais claros) */ --gov-gray-darkest: #2d3748; --gov-gray-dark: #4a5568; --gov-gray-medium: #718096; --gov-gray-light: #E2E8F0; --gov-gray-lighter: #F8FAFC; --gov-gray-lightest: #FFFFFF; /* Branco */ --gov-white: #FFFFFF; /* Cores de Status */ --gov-success: #4E866D; --gov-success-light: #F0FDF4; --gov-success-dark: #3D6E57; --gov-warning: #D4AF37; --gov-warning-light: #FFFBEB; --gov-warning-dark: #C5A059; --gov-danger: #DC3545; --gov-danger-light: #FEF2F2; --gov-danger-dark: #B71C1C; --gov-info: #4E866D; --gov-info-light: #F0FDF4; --gov-info-dark: #3D6E57; /* Cores Neutras */ --gov-neutral-gray: #A0AEC0; --gov-neutral-gray-light: #FFFFFF; --gov-neutral-gray-dark: #718096; --gov-amber: #C5A059; --gov-amber-light: #FFFBEB; --gov-amber-dark: #B08D3A; --gov-blue-soft: #718096; --gov-blue-soft-light: #FFFFFF; --gov-green-muted: #3D6E57; --gov-green-muted-light: #F0FDF4; /* Cores de Destaque */ --gov-gold: #D4AF37; --gov-gold-dark: #C5A059; --gov-green: #4E866D; --gov-green-dark: #3D6E57; /* Sidebar */ --sidebar-bg-start: #3D6E57; --sidebar-bg-end: #4E866D; --sidebar-text: #FFFFFF; --sidebar-text-secondary: #C6E2D4; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: #76B096; --sidebar-active-border: #D4AF37; /* Header */ --header-bg: #FFFFFF; --header-border: #4E866D; --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* ============================================ 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.85); } /* ============================================ UTILITÁRIOS DE DEPURAÇÃO Remove após testes ============================================ */ /* Visualizar paleta ativa (apenas desenvolvimento) */ body::before { content: attr(data-palette); position: fixed; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 12px; border-radius: 4px; font-size: 11px; font-family: monospace; z-index: 99999; display: none; /* Alterar para 'block' para debug */ pointer-events: none; }