/* ============================================================ AGRES — DESIGN TOKENS (v2.0 — "precision blue") Valores extraídos de: ~/agres-projetos/agres-design-system/colors_and_type.css Identidade: azul precisão + cinzas frios + superfícies paper. (v1 "verde agro" preservada no git: tag ds-oficial-v1) ============================================================ */ /* ---- Agres Sans — tipografia oficial da marca ---- Os arquivos vêm do agres-design-system (mesma cópia que os outros 9 apps usam). Estavam desatualizados aqui: Regular, Medium e Bold ainda eram a versão 1.023, enquanto SemiBold e ExtraBold já eram 2.000 — e o resto do parque roda 2.000/2.071 inteiro. Não era detalhe de arquivo: as métricas mudaram entre as versões (o dígito "0" foi de 675 para 708 unidades, o ":" de 286 para 378). Com o MESMO CSS, o relógio da topbar saía com larguras diferentes aqui e no Atendimento — foi assim que a diferença apareceu. Os itálicos são novidade: não havia nenhum arquivo, então os títulos display (h1, .reader__title) saíam com itálico FALSO, inclinado pelo navegador. Agora usam o desenho real da fonte. ?v=2 é cache-buster: os nomes dos arquivos mudaram de .otf para .ttf, mas o navegador que já tem a fonte antiga em cache precisa de um motivo para buscar de novo. */ :root { /* ---- Azul Agres (primário — "precision tech blue") ---- */ --ag-blue-900: #03182C; --ag-blue-800: #062A4D; --ag-blue-700: #0A3F70; --ag-blue-600: #0E5290; --ag-blue-500: #1668AC; /* PRIMÁRIO */ --ag-blue-400: #2F7FC0; --ag-blue-300: #5DA3DA; /* accent do tema escuro (AA em fundo escuro) */ --ag-blue-100: #CADEF1; --ag-blue-50: #EAF2FA; /* ---- Charcoal (neutros frios) ---- */ --ag-charcoal-900: #08101A; --ag-charcoal-800: #131820; --ag-charcoal-700: #1F2530; --ag-charcoal-600: #2E3744; --ag-charcoal-500: #4A5566; --ag-charcoal-400: #687588; --ag-charcoal-300: #97A2B1; --ag-charcoal-200: #C5CDD8; --ag-charcoal-100: #E3E7ED; --ag-charcoal-50: #F2F4F7; /* ---- Paper (superfícies) ---- */ --ag-paper: #F7F9FC; --ag-paper-2: #ECEFF5; --ag-paper-3: #DDE2EC; --ag-white: #FFFFFF; /* ---- Acentos ---- */ --ag-teal-500: #1A8F84; --ag-teal-50: #E2F4F2; --ag-clay-500: #C8651F; --ag-clay-50: #FBF1E8; --ag-harvest-500: #D9A312; --ag-harvest-50: #FBF4D9; --ag-danger: #C8302B; /* ---- Semânticas (use estas no layout) ---- */ --ag-bg: var(--ag-paper); --ag-surface: var(--ag-white); --ag-surface-dark: var(--ag-charcoal-900); --ag-text: var(--ag-charcoal-900); --ag-text-muted: var(--ag-charcoal-600); --ag-text-subtle: var(--ag-charcoal-400); --ag-text-on-dark: var(--ag-paper); --ag-text-on-dark-muted: var(--ag-charcoal-300); --ag-border: rgba(8, 16, 26, 0.10); --ag-divider: rgba(8, 16, 26, 0.10); /* Logo do header: troca sozinho com o tema (mesma técnica do painel de status). Claro = versão CINZA sobre fundo branco; escuro = versão BRANCA. */ --ag-logo: url("../assets/logo-agres-cinza.png"); --ag-accent: var(--ag-blue-500); --ag-accent-hover: var(--ag-blue-700); /* O accent faz dois trabalhos: cor de TEXTO/borda e cor de PREENCHIMENTO de botão (com texto branco em cima). No tema escuro os dois querem coisas opostas — texto precisa clarear, preenchimento precisa escurecer, senão o branco em cima dele cai pra 2,7:1. Por isso o preenchimento tem token próprio. No claro os dois são a mesma cor. */ --ag-accent-fill: var(--ag-blue-500); /* hover do PREENCHIMENTO: no claro escurece (blue-700); no escuro NÃO pode ir pro mais claro da rampa — branco em cima de blue-100 cai pra 1,38:1. */ --ag-accent-fill-hover: var(--ag-blue-700); --ag-accent-soft: var(--ag-blue-50); --ag-focus-ring: var(--ag-blue-500); /* compat: aliases usados pelo styles.css */ --ag-green-800: var(--ag-blue-700); --ag-green-700: var(--ag-blue-500); --ag-green-600: var(--ag-blue-600); --ag-green-500: var(--ag-blue-400); --ag-green-400: var(--ag-blue-400); --ag-green-100: var(--ag-blue-50); --ag-navy-800: var(--ag-charcoal-900); --ag-navy-700: var(--ag-charcoal-800); --ag-navy-600: var(--ag-charcoal-500); --ag-gray-900: var(--ag-charcoal-900); --ag-gray-700: var(--ag-charcoal-600); --ag-gray-600: var(--ag-charcoal-600); --ag-gray-500: var(--ag-charcoal-400); --ag-gray-300: var(--ag-charcoal-200); --ag-gray-200: var(--ag-charcoal-100); --ag-gray-100: var(--ag-paper-2); --ag-gray-50: var(--ag-charcoal-50); --ag-info: var(--ag-blue-500); --ag-warning: var(--ag-harvest-500); --ag-success: #16955A; /* Sobra da paleta v1: o styles.css usa --ag-amber-500 em dois olhos-de-boi (o "INFORMATIVO DA GESTÃO" no hero e o "Aniversário de empresa") e o alias nunca foi criado no v2. Sem ele a declaração é inválida e a cor cai na do pai: no hero escuro os dois saíam BRANCOS, iguais ao título — e o contraste pensado era azul (comunicado) x dourado (gestão). */ --ag-amber-500: var(--ag-harvest-500); /* ---- Tipografia ---- */ --ag-font-heading: "Agres Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ag-font-body: "Agres Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ag-text-xs: 0.75rem; --ag-text-sm: 0.875rem; --ag-text-md: 1rem; --ag-text-lg: 1.125rem; --ag-text-xl: 1.5rem; --ag-text-2xl: 1.875rem; --ag-text-3xl: 2.6rem; --ag-leading-tight: 1.05; --ag-leading-body: 1.45; /* ---- Espaçamento (grade de 4px) ---- */ --ag-sp-1: 4px; --ag-sp-2: 8px; --ag-sp-3: 12px; --ag-sp-4: 16px; --ag-sp-5: 24px; --ag-sp-6: 32px; --ag-sp-7: 48px; --ag-sp-8: 64px; /* ---- Raio ---- */ --ag-radius-sm: 4px; --ag-radius-md: 6px; --ag-radius-lg: 10px; --ag-radius-xl: 16px; --ag-radius-full: 999px; /* ---- Sombras (frias, undertone azul) ---- */ --ag-shadow-sm: 0 1px 2px rgba(8,16,26,0.06), 0 2px 6px rgba(8,16,26,0.06); --ag-shadow-md: 0 2px 4px rgba(8,16,26,0.06), 0 6px 16px rgba(8,16,26,0.08); --ag-shadow-lg: 0 4px 10px rgba(8,16,26,0.08), 0 16px 36px rgba(8,16,26,0.12); --ag-shadow-focus: 0 0 0 3px rgba(22,104,172,0.30); /* ---- Movimento ---- */ --ag-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1); /* ---- Camadas ---- */ --ag-z-header: 30; --ag-z-overlay: 40; --ag-z-toast: 50; } /* ============================================================ TEMA ESCURO — padrão Agres (mantém a identidade "precision blue"). Ativado por [data-theme="dark"] no . Só sobrescreve as variáveis semânticas; componentes seguem usando-as normalmente. ============================================================ */ [data-theme="dark"] { --ag-bg: #0F151C; --ag-surface: #1A2027; --ag-surface-dark: #08101A; --ag-text: #EAEEF2; --ag-text-muted: #AEB7C2; --ag-text-subtle: #7E8893; --ag-border: rgba(255,255,255,.10); --ag-divider: rgba(255,255,255,.07); --ag-logo: url("../assets/logo-agres-branco.png"); --ag-accent-soft: rgba(22,104,172,.22); /* aliases usados nos componentes */ --ag-gray-50: #161C23; --ag-gray-100: rgba(255,255,255,.06); --ag-gray-200: rgba(255,255,255,.10); --ag-gray-300: rgba(255,255,255,.16); --ag-gray-500: #7E8893; --ag-gray-600: #AEB7C2; /* texto de badge/meta — claro no escuro */ --ag-gray-700: #C5CDD8; --ag-green-100: rgba(22,104,172,.20); /* Estes três são consumidos de fora (o painel /status/ carrega este arquivo e escreveu valor de reserva escuro para eles). Sem variante escura aqui eles resolviam com o valor CLARO do :root, e a reserva do consumidor nunca entrava: faixas cinza-claras e texto azul-quase-preto dentro de uma página escura. É defeito nosso, num arquivo nosso, numa página que o CEO e o parceiro leem. */ --ag-paper-3: #232B35; /* O accent do tema claro (#1668AC) reprovava no escuro: 2,82:1 contra a superfície do card, onde ele é TEXTO ("Acessar", links, selo). O blue-300 dá 6,03:1. Vale pra intranet toda, não só pro painel. */ --ag-accent: var(--ag-blue-300); --ag-accent-hover: var(--ag-blue-100); --ag-accent-fill: var(--ag-blue-600); /* branco em cima: 7,99:1 */ --ag-accent-fill-hover: var(--ag-blue-500); /* branco em cima: 5,82:1 */ --ag-shadow-sm: 0 1px 2px rgba(0,0,0,.45); --ag-shadow-md: 0 4px 12px rgba(0,0,0,.55); --ag-shadow-lg: 0 12px 28px rgba(0,0,0,.6); }