/* ========================================================================== DESIGN SYSTEM — Plataforma Fernandes & Tomie (v9.19.0) Fonte única de todos os tokens de cor. Carregado ANTES de css/estilo.css em todas as páginas, para que estilo.css apenas CONSUMA estas variáveis. Duas decisões da Sprint 7.1, tomadas com a autora, estão registradas aqui: 1. A COR DA MARCA foi MANTIDA em #01231C (verde institucional histórico), e não trocada por #1F4D3A. A regra "não alterar a identidade institucional" prevalece sobre a paleta sugerida. As cores novas entram só como identidade das ÁREAS. 2. As cores de área da Sprint são usadas em DETALHE (barra, borda, ícone). Quando a cor precisa virar TEXTO, usa-se a variante --*-text, escurecida até passar WCAG AA (>= 4.5 sobre branco). Só Consumidor precisou de variante; as demais já passam. Isso concilia a paleta fornecida com a auditoria de contraste que a Sprint exige. ========================================================================== */ :root { /* ---------- Marca institucional ---------- */ --brand-primary: #01231C; /* MANTIDA (não #1F4D3A). Cabeçalho, rodapé, botão principal, títulos. Contraste 16.7 (AAA). */ --brand-primary-hover: #0a3327; --brand-secondary: #f6f6f2; /* superfície clara institucional (o #F5F5F5 da Sprint, alinhado ao cinza-claro do site) */ --brand-accent: #b8912e; /* dourado institucional — só linha/borda decorativa. O #D4AF37 da Sprint reprova texto (2.1); este é levemente mais escuro para acento. */ /* aliases históricos: estilo.css usa estes nomes em ~60 pontos. Apontam para a marca. */ --verde-escuro: var(--brand-primary); --verde: var(--brand-primary); --verde-hover: var(--brand-primary-hover); --sage: #5f8257; --sage-claro: #9fbf95; /* ---------- Neutros ---------- */ --cinza-texto: #23231f; --cinza-suave: #6f6f68; --cinza-claro: #f6f6f2; --cinza-borda: #eae9e3; --branco: #ffffff; --whatsapp: #25d366; /* ---------- Elevação ---------- */ --sombra: 0 1px 2px rgba(1, 35, 28, .04); --sombra-sutil: 0 6px 24px rgba(1, 35, 28, .06); --sombra-card: 0 1px 3px rgba(1, 35, 28, .05); --sombra-card-hover: 0 10px 30px rgba(1, 35, 28, .09); /* ---------- Paleta das Áreas (Sprint 7.1) ---------- -<área> cor sólida — barra de card, borda, ícone decorativo, overlay da Hero -<área>-light fundo claro — tile de ícone, badge -<área>-accent toque — hover, indicador -<área>-text cor para TEXTO (título pequeno, link ativo), garantida em AA */ --area-trabalhista: #2E7D32; --area-trabalhista-light: #E8F5E9; --area-trabalhista-accent: #66BB6A; --area-trabalhista-text: #2E7D32; /* 5.13 AA */ --area-previdenciario: #1565C0; --area-previdenciario-light: #E3F2FD; --area-previdenciario-accent: #42A5F5; --area-previdenciario-text: #1565C0; /* 5.75 AA */ --area-consumidor: #C79100; --area-consumidor-light: #FFF8E1; --area-consumidor-accent: #FBC02D; --area-consumidor-text: #936a00; /* #C79100 reprova (2.81); 4.88 AA */ --area-contratos: #455A64; --area-contratos-light: #ECEFF1; --area-contratos-accent: #78909C; --area-contratos-text: #455A64; /* 7.24 AA */ --area-criminal: #7B1E3A; --area-criminal-light: #F8E9ED; --area-criminal-accent: #AD1457; --area-criminal-text: #7B1E3A; /* 10.05 AA */ /* ---------- Contexto de Área ---------- Padrão (Home, Sobre, Contato): tudo cai na marca institucional. Uma classe .area-* no , ou o [href^] dos cards da Home, sobrescreve isto. */ --area: var(--brand-primary); --area-light: var(--brand-secondary); --area-accent: var(--sage); --area-text: var(--brand-primary); /* translúcido para detalhes muito sutis (mantido da v9.17.0) */ --area-suave: rgba(1, 35, 28, .07); /* ---------- Layout / tipografia (não-cor, centralizados aqui para fonte única) ---------- */ --max: 1160px; --fonte: 'Inter', "Segoe UI", "Helvetica Neue", Arial, sans-serif; --serif: 'Cormorant Garamond', Georgia, "Times New Roman", serif; } /* ---------- Resolução do contexto de Área ---------- Cada bloco troca os 4 tokens de contexto. Nenhum componente conhece as áreas: eles leem --area / --area-light / --area-accent / --area-text e mudam de cor sozinhos. */ body.area-trabalhista, .area-card[href^="trabalhista"] { --area: var(--area-trabalhista); --area-light: var(--area-trabalhista-light); --area-accent: var(--area-trabalhista-accent); --area-text: var(--area-trabalhista-text); --area-suave: rgba(46,125,50,.08); } body.area-previdenciario, .area-card[href^="previdenciario"] { --area: var(--area-previdenciario); --area-light: var(--area-previdenciario-light); --area-accent: var(--area-previdenciario-accent); --area-text: var(--area-previdenciario-text); --area-suave: rgba(21,101,192,.08); } body.area-consumidor, .area-card[href^="consumidor"] { --area: var(--area-consumidor); --area-light: var(--area-consumidor-light); --area-accent: var(--area-consumidor-accent); --area-text: var(--area-consumidor-text); --area-suave: rgba(199,145,0,.10); } body.area-contratos, .area-card[href^="contratos"] { --area: var(--area-contratos); --area-light: var(--area-contratos-light); --area-accent: var(--area-contratos-accent); --area-text: var(--area-contratos-text); --area-suave: rgba(69,90,100,.09); } body.area-criminal, .area-card[href^="criminal"] { --area: var(--area-criminal); --area-light: var(--area-criminal-light); --area-accent: var(--area-criminal-accent); --area-text: var(--area-criminal-text); --area-suave: rgba(123,30,58,.09); }