/** * ============================================== * APOLLO TI - PORTAL MGMT * Sistema Centralizado de Cores e Temas * ============================================== * * Este arquivo é a ÚNICA fonte de verdade para cores do sistema. * Suporta tema claro e escuro via data-theme no elemento . * * Uso: ou */ /* ============================================== TEMA ESCURO (PADRÃO) ============================================== */ :root, [data-theme="dark"] { /* --- CORES PRIMÁRIAS DA MARCA --- */ --color-brand-primary: #FFD900; --color-brand-primary-hover: #FFF066; --color-brand-primary-dark: #D3B500; --color-brand-primary-light: #FFE433; /* --- BACKGROUNDS --- */ --color-bg-primary: #F8F9FA; --color-apollo-bg-gray-100: #FFFFFF; --color-bg-tertiary: #F1F3F4; --color-bg-elevated: #FFFFFF; --color-bg-overlay: rgba(248, 249, 250, 0.95); /* --- SUPERFÍCIES (CARDS, PAINÉIS) --- */ --color-surface-base: #FFFFFF; --color-surface-raised: #F8F9FA; --color-surface-overlay: #F1F3F4; --color-surface-hover: #E8EAED; /* --- BORDAS --- */ --color-border-subtle: #E8EAED; --color-border-default: #DADCE0; --color-border-strong: #BDC1C6; --color-border-brand: var(--color-brand-primary); /* --- TEXTOS --- */ --color-text-primary: #202124; --color-text-secondary: #5F6368; --color-text-tertiary: #9AA0A6; --color-apollo-text-secondary: #BDC1C6; --color-text-disabled: #DADCE0; --color-text-inverse: #FFFFFF; --color-text-brand: var(--color-brand-primary); /* --- STATUS E FEEDBACK --- */ --color-success-base: #10B981; --color-success-bg: rgba(16, 185, 129, 0.15); --color-success-border: rgba(16, 185, 129, 0.3); --color-success-text: #51cf66; --color-warning-base: #F59E0B; --color-warning-bg: rgba(245, 158, 11, 0.15); --color-warning-border: rgba(245, 158, 11, 0.3); --color-warning-text: #FCD34D; --color-error-base: #DC2626; --color-error-bg: rgba(220, 53, 69, 0.15); --color-error-border: rgba(220, 53, 69, 0.3); --color-error-text: #ff6b6b; --color-info-base: #3B82F6; --color-info-bg: rgba(13, 202, 240, 0.15); --color-info-border: rgba(13, 202, 240, 0.3); --color-info-text: #66d9ef; /* --- SOMBRAS --- */ --apollo-apollo-shadow-md-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --apollo-shadow-md-md: 0 4px 16px rgba(0, 0, 0, 0.4); --apollo-shadow-md-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --apollo-shadow-md-xl: 0 12px 48px rgba(0, 0, 0, 0.6); --apollo-shadow-md-brand: 0 4px 24px rgba(255, 217, 0, 0.3); --apollo-shadow-md-focus: 0 0 0 3px rgba(255, 217, 0, 0.1); /* --- OPACIDADES --- */ --opacity-disabled: 0.5; --opacity-hover: 0.8; --opacity-overlay: 0.95; } /* ============================================== TEMA CLARO ============================================== */ [data-theme="light"] { /* --- CORES PRIMÁRIAS DA MARCA (MANTÉM) --- */ --color-brand-primary: #FFD900; --color-brand-primary-hover: #FFC700; --color-brand-primary-dark: #D3B500; --color-brand-primary-light: #FFEB99; /* --- BACKGROUNDS --- */ --color-bg-primary: #FFFFFF; --color-apollo-bg-gray-100: #F9FAFB; --color-bg-tertiary: #F3F4F6; --color-bg-elevated: #FFFFFF; --color-bg-overlay: rgba(255, 255, 255, 0.95); /* --- SUPERFÍCIES (CARDS, PAINÉIS) --- */ --color-surface-base: #FFFFFF; --color-surface-raised: #F9FAFB; --color-surface-overlay: #F3F4F6; --color-surface-hover: #E5E7EB; /* --- BORDAS --- */ --color-border-subtle: #F3F4F6; --color-border-default: #E5E7EB; --color-border-strong: #D1D5DB; --color-border-brand: var(--color-brand-primary); /* --- TEXTOS --- */ --color-text-primary: #111827; --color-text-secondary: #374151; --color-text-tertiary: #6B7280; --color-apollo-text-secondary: #9CA3AF; --color-text-disabled: #D1D5DB; --color-text-inverse: #FFFFFF; --color-text-brand: #B8A000; /* --- STATUS E FEEDBACK --- */ --color-success-base: #059669; --color-success-bg: #D1FAE5; --color-success-border: #6EE7B7; --color-success-text: #047857; --color-warning-base: #D97706; --color-warning-bg: #FEF3C7; --color-warning-border: #FCD34D; --color-warning-text: #B45309; --color-error-base: #DC2626; --color-error-bg: #FEE2E2; --color-error-border: #FCA5A5; --color-error-text: #B91C1C; --color-info-base: #2563EB; --color-info-bg: #DBEAFE; --color-info-border: #93C5FD; --color-info-text: #1E40AF; /* --- SOMBRAS --- */ --apollo-apollo-shadow-md-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --apollo-shadow-md-md: 0 4px 6px rgba(0, 0, 0, 0.07); --apollo-shadow-md-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --apollo-shadow-md-xl: 0 20px 25px rgba(0, 0, 0, 0.15); --apollo-shadow-md-brand: 0 4px 16px rgba(255, 217, 0, 0.4); --apollo-shadow-md-focus: 0 0 0 3px rgba(255, 217, 0, 0.2); /* --- OPACIDADES (MANTÉM) --- */ --opacity-disabled: 0.5; --opacity-hover: 0.8; --opacity-overlay: 0.95; } /* ============================================== ESPAÇAMENTOS PADRONIZADOS ============================================== */ :root { --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ } /* ============================================== BORDER RADIUS PADRONIZADO ============================================== */ :root { --radius-none: 0; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; } /* ============================================== TRANSIÇÕES PADRONIZADAS ============================================== */ :root { --transition-fast: all 0.15s ease; --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* ============================================== Z-INDEX SCALE ============================================== */ :root { --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } /* ============================================== UTILITÁRIOS DE APLICAÇÃO ============================================== */ /* Aplicar background primário */ .bg-primary { background-color: var(--color-bg-primary) !important; } .bg-surface { background-color: var(--color-surface-base) !important; } /* Aplicar cores de texto */ .text-primary { color: var(--color-text-primary) !important; } .text-secondary { color: var(--color-text-secondary) !important; } .apollo-text-secondary { color: var(--color-apollo-text-secondary) !important; } .text-brand { color: var(--color-text-brand) !important; } /* Aplicar bordas */ .border-default { border: 1px solid var(--color-border-default) !important; } .border-brand { border-color: var(--color-border-brand) !important; } /* ============================================== GUIA DE USO ============================================== */ /** * COMO USAR: * * 1. No HTML, defina o tema: * ou * * 2. No CSS, use as variáveis: * background: var(--color-bg-primary); * color: var(--color-text-primary); * border: 1px solid var(--color-border-default); * * 3. NUNCA use cores hardcoded (ex: #FFD900, #121212) * SEMPRE use as variáveis CSS * * 4. Para trocar de tema via JavaScript: * document.documentElement.setAttribute('data-theme', 'light'); * ou * document.documentElement.setAttribute('data-theme', 'dark'); */