/* DPMG Design System — TOKENS (fonte única de verdade) * ===================================================================== * Este arquivo é a ÚNICA fonte de tokens do site (cores, tipografia, * raios, sombras, espaçamentos, z-index, foco). Áreas pública * (base_script.html) e autenticada (html/base.html) consomem daqui. * Nenhum outro CSS deve declarar cor/raio/sombra/tipografia própria — * apenas consumir estes tokens ou os aliases legados abaixo. * * --------------------------------------------------------------------- * ESCALA TIPOGRÁFICA (referência para os componentes) * h1 / page-title ~2rem (var(--font-display), 700) * h2 / section ~1.5rem (var(--font-display), 600) * h3 ~1.25rem (var(--font-display), 600) * corpo / body 1rem (var(--font-ui), 400) * small / meta 0.75–0.875rem * * PAPÉIS DAS FONTES * --font-ui → aplicação (UI): navbar, formulários, tabelas, * botões, dashboard. Fonte: Inter. * --font-display → títulos de página/seção da aplicação. EB Garamond. * --font-sans → corpo do conteúdo editorial público (Inter). * --font-serif → títulos do conteúdo editorial público (EB Garamond). * Tipografia unificada em Inter + EB Garamond em todo o site: * Playfair Display foi REMOVIDA na US-502 e Lato na unificação atual. * --------------------------------------------------------------------- */ :root { /* ===== Marca ===== */ --dpmg-green: #1a5c3a; --dpmg-green-light: #2d7a52; --dpmg-green-dark: #0f3d24; --dpmg-gold: #c9a227; --dpmg-gold-light: #e0b93a; /* Componentes RGB (para rgba() com alpha derivado de token) */ --dpmg-green-rgb: 26, 92, 58; /* = #1a5c3a */ --dpmg-green-light-rgb: 45, 122, 82; /* = #2d7a52 */ --dpmg-gold-rgb: 201, 162, 39; /* = #c9a227 */ /* Semantic aliases (nomes de referência do PRD de front-end) */ --cor-primaria: var(--dpmg-green); --cor-hero: var(--dpmg-green-dark); --cor-aviso: #fff8e6; --cor-aviso-texto: #6b4e00; --cor-aviso-borda: #f0d692; /* ===== Badge tokens (contraste AA garantido — NÃO alterar) ===== */ --badge-ferramenta-bg: #0f3d24; /* verde escuro; texto branco -> AA */ --badge-ferramenta-text: #ffffff; --badge-guia-bg: #7a5c00; /* âmbar escuro; texto branco -> AA */ --badge-guia-text: #ffffff; --badge-font-size: 0.75rem; /* 12px minimo */ --badge-font-weight: 500; /* ===== Chip tokens — Informativos STJ (R2) — NÃO alterar (AA) ===== */ --chip-font-size: 0.75rem; /* 12px */ --chip-penal-bg: #e6efe9; /* tint de verde institucional */ --chip-penal-text: #14502f; /* verde escuro — AA sobre o tint */ --chip-civel-bg: #eceef1; /* tint neutro/ardosia */ --chip-civel-text: #35424f; /* ardosia escura — AA sobre o tint */ --chip-edicao-bg: #f6edd6; /* tint ambar */ --chip-edicao-text: #6b4e00; /* ambar escuro — AA sobre o tint */ --chip-alerta-bg: #fbeecf; /* tint ambar de aviso */ --chip-alerta-text: #7a4b00; /* ambar escuro — AA sobre o tint */ --chip-alerta-borda: #e6c98a; /* Toast de erro (US-824, dpmg-base.css .dpmg-toast-erro) — mesmo par bg/text do .alert-danger do Bootstrap, para não introduzir um segundo "vermelho de perigo" na paleta (ver nota em dpmg-base.css .btn-danger). */ --chip-erro-bg: #f8d7da; --chip-erro-text: #842029; /* Chips — Súmulas e Teses (§12.6). Vigente = verde; cancelada/superada = neutro. */ --chip-vigente-bg: #e3f0e8; --chip-vigente-text: #14502f; /* AA sobre o tint */ --chip-cancelada-bg: #e9ecef; --chip-cancelada-text: #495057; /* neutro/cinza — AA */ --chip-tribunal-bg: #eceef1; --chip-tribunal-text: #35424f; --chip-sv-bg: #f6edd6; /* âmbar — destaca autoridade da vinculante */ --chip-sv-text: #6b4e00; /* Tiles de icone (R11): tamanho unico e tint de verde com contraste >= 3:1 */ --icon-tile-size: 40px; --icon-tile-bg: rgba(26, 92, 58, 0.14); /* ===== Neutros ===== */ --dpmg-dark: #1a1a2e; --dpmg-gray: #f8f9fa; --dpmg-text: #333; --dpmg-muted: #666; /* ===== Superfícies e texto (estruturado para tema escuro futuro) ===== * Estes tokens são os candidatos a serem sobrescritos por * [data-theme="dark"] (ver bloco comentado ao fim do arquivo). */ --color-surface: #ffffff; --color-surface-alt: #f8f9fa; --color-bg: #f8f9fa; --color-text: #1a1a1a; --color-text-muted: #6b7280; --color-border: rgba(26, 92, 58, 0.12); /* borda com tint verde (área pública/dashboard) */ --border-color: rgba(0, 0, 0, 0.08); /* borda neutra (área autenticada) */ --border-color-strong: rgba(0, 0, 0, 0.14); --color-navbar-ink: #1a1a2e; /* texto de dropdown-item na navbar */ /* ===== Branco / on-brand (US-514) ===== * Token único para texto/ícones brancos sobre superfícies de marca * (navbar, footer, botões primários, skip-link) e base RGB para as * sobreposições claras rgba(255,255,255,…) usadas como realce/hover * sobre fundos verde-escuros. Substitui os literais #fff/#ffffff/ * rgba(255,255,255,…) espalhados nos CSS de shell/navbar/base/login. */ --color-on-primary: #ffffff; /* = --text-inverse (texto sobre marca) */ --overlay-light-rgb: 255, 255, 255; /* p/ rgba(var(--overlay-light-rgb), α) */ /* ===== Tipografia ===== */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* UI da aplicação */ --font-display: 'EB Garamond', Georgia, serif; /* títulos da aplicação */ --font-sans: 'Inter', sans-serif; /* corpo editorial público */ --font-serif: 'EB Garamond', serif; /* títulos editorial público */ --font-mono: 'Courier New', monospace; --line-height-body: 1.65; --line-height-heading: 1.25; --letter-spacing-heading: -0.02em; /* ===== Espaçamento (escala 4px) ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ===== Radius (escala única) ===== */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius: var(--radius-lg); /* alias legado (dpmg-base.css usa var(--radius)) */ /* ===== Sombras (escala única — NEUTRAS, decisão de dpmg-base.css) ===== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.07), 0 8px 24px rgba(0, 0, 0, 0.05); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.06); /* Cards da área pública — convertidos para neutro (antes tinham tint verde) */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 10px 28px rgba(0, 0, 0, 0.12); /* Navbar da área autenticada: realce interno claro de 1px + queda neutra. * O realce superior não é coberto pela escala --shadow-* (que é só queda). */ --shadow-navbar: 0 1px 0 rgba(var(--overlay-light-rgb), 0.06), 0 2px 8px rgba(0, 0, 0, 0.15); /* ===== Transições ===== */ --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ===== z-index ===== */ --z-dropdown: 1000; --z-sticky: 1020; --z-modal: 1050; --z-skiplink: 1100; /* ===== Foco (US-1824) ===== * Anel DUPLO. O anel anterior era dourado com alpha 0.45 e falhava o * mínimo de 3:1 (WCAG 1.4.11, não-textual) em TODOS os fundos do site, * inclusive nos claros — medido: 1.71:1 sobre a navbar #1a5c3a, 1.38:1 * sobre #2d7a52, 2.12:1 sobre o hero #0f3d24, 1.43:1 sobre a página * #f8f9fa e 1.46:1 sobre cartão branco. Ou seja: quem navegava por * teclado não enxergava o foco em lugar nenhum. * * Nenhuma cor sólida única passa em todos os fundos (o próprio dourado * sólido dá 2.29:1 sobre #f8f9fa). A solução é o par claro/escuro: em * qualquer fundo pelo menos um dos dois anéis alcança 3:1, e os dois * contrastam 6.80:1 entre si, então o contorno sempre se distingue. * * ouro #c9a227 ..... 3.29:1 sobre #1a5c3a | 5.07:1 sobre #0f3d24 * escuro #10231a ... 3.14:1 sobre #2d7a52 | 15.60:1 sobre #f8f9fa * | 16.44:1 sobre #ffffff * * Sem alpha de propósito: transparência recompõe a cor contra o fundo e * foi exatamente o que derrubou o contraste do anel anterior. */ --dpmg-focus-outer: #10231a; /* verde quase-preto; par do dourado */ /* Variante box-shadow (elementos que já usavam --focus-ring). */ --focus-ring: 0 0 0 2px var(--dpmg-gold), 0 0 0 4px var(--dpmg-focus-outer); --color-ring: var(--dpmg-gold); /* Variante outline, para os 37 pontos que declaravam * `outline: 3px solid var(--dpmg-gold)` na mão. Usar os três juntos: * * outline: var(--focus-outline); * outline-offset: var(--focus-outline-offset); * box-shadow: var(--focus-ring-outer); * * O outline dourado fica de 2px a 4px da borda e a sombra escura de 0 a * 4px, então o dourado é desenhado sobre a faixa externa da sombra e * sobra uma faixa escura interna — mesmo par de duas cores do * --focus-ring. Mantém `outline` como camada principal de propósito: * outline não é recortado por `overflow: hidden`, então se a sombra for * cortada por um ancestral o foco ainda aparece (degrada para o * comportamento antigo, nunca para invisível). */ --focus-outline: 2px solid var(--dpmg-gold); --focus-outline-offset: 2px; --focus-ring-outer: 0 0 0 4px var(--dpmg-focus-outer); /* ===================================================================== * ALIASES LEGADOS (depreciados) * Mantidos para não exigir reescrita big-bang de dpmg-base.css, * dpmg-forms.css, dpmg-navbar.css, dpmg-paginas.css e dpmg-login.css. * (dpmg-home.css foi removido na US-1111 — migrado para dpmg-paginas.css.) * CONVERGÊNCIA: --color-primary passou de #1a5f3a -> #1a5c3a e * --color-accent de #d4af37 -> #c9a227 (unificação de paleta, US-501). * ===================================================================== */ --color-primary: #1a5c3a; /* = var(--dpmg-green) */ --color-primary-light: var(--dpmg-green-light); --color-primary-dark: var(--dpmg-green-dark); --color-accent: #c9a227; /* = var(--dpmg-gold) */ --color-accent-dark: #b28f22; /* dourado escuro (login admin) */ --color-primary-rgb: 26, 92, 58; /* = #1a5c3a */ --color-primary-light-rgb: 45, 122, 82; /* = #2d7a52 */ --color-accent-rgb: 201, 162, 39; /* = #c9a227 */ } /* ===================================================================== * TEMA ESCURO (placeholder — NÃO implementado nesta fase, US-534) * Quando implementado, sobrescrever aqui apenas os tokens de superfície, * texto e borda. Os tokens de marca/chips/badges permanecem. * --------------------------------------------------------------------- * :root[data-theme="dark"] { * --color-surface: #14201a; * --color-surface-alt: #0f1a14; * --color-bg: #0b120e; * --color-text: #e8ede9; * --color-text-muted: #a7b3ab; * --border-color: rgba(255, 255, 255, 0.10); * --border-color-strong: rgba(255, 255, 255, 0.18); * } * ===================================================================== */