/* ========================================================================= TEMA — design tokens do Escritório Digital RMBF Único arquivo de tokens. Os dois temas trocam SOMENTE as variáveis abaixo (atributo data-tema no ). Nenhum componente usa cor fora daqui. Cor de marca PROVISÓRIA (índigo) até a sessão de identidade visual — trocar a marca custa 1 linha (--marca / --marca-escuro). ========================================================================= */ :root { /* --- Tokens que NÃO dependem do tema --- */ --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Escala tipográfica */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-28: 28px; --fs-36: 36px; --peso-metrica: 600; /* Espaçamento (base 4) */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; /* Raios */ --r-sm: 8px; /* componentes */ --r: 12px; /* cartões */ --r-lg: 16px; --r-pill: 999px; /* Transições (microinterações discretas) */ --t-rapida: 150ms cubic-bezier(.4, 0, .2, 1); --t-media: 200ms cubic-bezier(.4, 0, .2, 1); /* Layout */ --barra: 264px; /* Marca "Escritório Inteligente" — gradiente (refinamento sobre o índigo provisório) */ --grad-marca: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #A855F7 100%); --grad-marca-hover: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #9333EA 100%); /* Sidebar escura premium (fixa nos dois temas — padrão de produto) */ --sb-fundo: #0D1F2B; --sb-fundo-2: #0A1822; --sb-borda: rgba(255, 255, 255, .07); --sb-texto: #E7EEF4; --sb-texto-2: #9FB4C4; --sb-texto-3: #5F7A8C; --sb-hover: rgba(255, 255, 255, .06); --sb-ativo: rgba(139, 92, 246, .16); /* Ícones coloridos por área (estilo ClickUp) */ --ico-marketing: #F472B6; --ico-comercial: #60A5FA; --ico-operacional: #34D399; --ico-financeiro: #FBBF24; --ico-gestao: #A78BFA; --ico-tecnologia: #22D3EE; --ico-rh: #FB923C; --ico-modulo: #818CF8; } /* ============================ TEMA CLARO ============================ */ :root, :root[data-tema="claro"] { --marca: #4F46E5; /* índigo profundo — ações primárias, links, destaques */ --marca-forte: #4338CA; /* hover/estado pressionado */ --marca-suave: #EEF2FF; /* tinte de fundo para estado ativo/seleção */ --marca-borda: #C7D2FE; --sobre-marca: #FFFFFF; /* texto sobre a cor de marca */ --fundo: #FAFAF9; --superficie: #FFFFFF; --superficie-2: #F5F5F4; /* alternadas / cabeçalhos de tabela */ --borda: #E7E5E4; --borda-forte: #D6D3D1; --texto: #1C1917; /* primário */ --texto-2: #57534E; /* secundário (AA sobre fundo/superfície) */ --texto-3: #78716C; /* terciário / dicas */ --ok: #15803D; --ok-bg: #DCFCE7; --ok-borda: #BBF7D0; --atencao: #B45309; --atencao-bg: #FEF3C7; --atencao-borda: #FDE68A; --erro: #B91C1C; --erro-bg: #FEE2E2; --erro-borda: #FECACA; --info: #4F46E5; --info-bg: #EEF2FF; --info-borda: #E0E7FF; /* Sombras sutilíssimas no claro */ --sombra-1: 0 1px 2px rgba(28, 25, 23, .05); --sombra-2: 0 1px 3px rgba(28, 25, 23, .06), 0 6px 16px rgba(28, 25, 23, .05); --sombra-3: 0 16px 40px rgba(28, 25, 23, .16); --anel-foco: 0 0 0 3px rgba(79, 70, 229, .35); /* Acentos por etapa (kanban) — cabeçalhos coloridos */ --ac-azul: #2563EB; --ac-azul-bg: #EFF6FF; --ac-ciano: #0E7490; --ac-ciano-bg: #ECFEFF; --ac-verde: #15803D; --ac-verde-bg: #F0FDF4; --ac-ambar: #B45309; --ac-ambar-bg: #FFFBEB; --ac-roxo: #6D28D9; --ac-roxo-bg: #F5F3FF; --ac-vermelho: #B91C1C; --ac-vermelho-bg: #FEF2F2; --ac-cinza: #475569; --ac-cinza-bg: #F8FAFC; color-scheme: light; } /* ============================ TEMA ESCURO ============================ */ :root[data-tema="escuro"] { --marca: #818CF8; --marca-forte: #A5B4FC; --marca-suave: #20203C; --marca-borda: #3730A3; --sobre-marca: #0C0A09; --fundo: #0C0A09; --superficie: #1C1917; --superficie-2: #232020; --borda: #292524; --borda-forte: #3A3532; --texto: #FAFAF9; --texto-2: #A8A29E; --texto-3: #948D86; /* claro o bastante p/ AA sobre fundo e superfície */ --ok: #4ADE80; --ok-bg: #0E2A19; --ok-borda: #166534; --atencao: #FBBF24; --atencao-bg: #2A1E06; --atencao-borda: #78350F; --erro: #F87171; --erro-bg: #2A1111; --erro-borda: #7F1D1D; --info: #818CF8; --info-bg: #20203C; --info-borda: #3730A3; /* No escuro, bordas substituem sombras */ --sombra-1: none; --sombra-2: none; --sombra-3: 0 16px 40px rgba(0, 0, 0, .55); --anel-foco: 0 0 0 3px rgba(129, 140, 248, .45); /* Acentos por etapa (kanban) — pares para o tema escuro */ --ac-azul: #60A5FA; --ac-azul-bg: #16233C; --ac-ciano: #22D3EE; --ac-ciano-bg: #0E2A30; --ac-verde: #4ADE80; --ac-verde-bg: #0E2A19; --ac-ambar: #FBBF24; --ac-ambar-bg: #2A1E06; --ac-roxo: #A78BFA; --ac-roxo-bg: #221A3A; --ac-vermelho: #F87171; --ac-vermelho-bg: #2A1111; --ac-cinza: #94A3B8; --ac-cinza-bg: #1E2530; color-scheme: dark; }