/* ===================================================================== VEUS Jurídico — Design Tokens --------------------------------------------------------------------- Espelho dos tokens canônicos definidos em `infra/authentik/assets/brand-tokens.css`. Mantemos uma cópia local aqui (não @import remoto) por CSP estrita e para o app ser self-contained — se a marca evoluir, a fonte de verdade continua no Authentik e este arquivo é re-sincronizado manualmente. Pivot Plêiade → VEUS aplicado em 2026-05-12: cinza Pantone Cool Gray 11 C + amarelo Pantone 1235 C; fontes Barlow Condensed (display) + Inter (body). Conduit ITC fica como primário desktop (não-web por licença ITC/Monotype). ===================================================================== */ :root { /* --- Paleta cinza VEUS (Pantone Cool Gray 11 C — primária) --- */ --veus-gray-pure: #595959; --veus-gray-deep: #2a2a2a; --veus-gray-rich: #3d3d3d; --veus-gray-mid: #6e6e6e; --veus-gray-soft: #8c8c8c; --veus-gray-pale: #d9d9d9; --veus-gray-ash: #ececec; --veus-gray-mist: #f5f5f5; --veus-gray-fog: #fafafa; /* --- Paleta amarela VEUS (Pantone 1235 C — accent) --- */ --veus-yellow: #FFB316; --veus-yellow-deep: #e69d00; --veus-yellow-link: #956200; /* AA-safe (5.00:1 vs #fafafa) p/ texto-link */ --veus-yellow-warm: #ffc04a; --veus-yellow-soft: #ffce5c; --veus-yellow-pale: rgba(255, 179, 22, 0.18); --veus-yellow-faint: rgba(255, 179, 22, 0.08); --veus-yellow-ghost: rgba(255, 179, 22, 0.03); /* --- Brancos / glass --- */ --veus-white: #ffffff; --veus-off-white: #fafafa; --veus-glass-bg: rgba(255, 255, 255, 0.82); --veus-glass-border: rgba(255, 255, 255, 0.45); /* --- Estados (AA-safe sobre fundo claro) --- */ --veus-error: #d4423a; --veus-error-bg: rgba(212, 66, 58, 0.10); --veus-success: #2f9e44; --veus-success-bg: rgba(47, 158, 68, 0.12); --veus-warning: #f59e0b; --veus-info: #1971c2; /* --- Tipografia — famílias Conduit ITC é desktop-only (Monotype/ITC) — não-web por licença. Barlow Condensed substitui em display; Inter em body. Ambos via Google Fonts (preconnect em base.html). */ --veus-font-display: "Conduit ITC", "Barlow Condensed", "Oswald", "Saira Condensed", system-ui, sans-serif; --veus-font-body: "Conduit ITC", "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --veus-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* --- Escala fluida --- */ --veus-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); --veus-text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem); --veus-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --veus-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); --veus-text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem); --veus-text-2xl: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); --veus-text-3xl: clamp(2.75rem, 2rem + 3vw, 4rem); --veus-text-hero: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); /* --- Pesos --- */ --veus-weight-light: 300; --veus-weight-regular: 400; --veus-weight-medium: 500; --veus-weight-semibold: 600; --veus-weight-bold: 700; /* --- Leading --- */ --veus-leading-tight: 1.15; --veus-leading-snug: 1.3; --veus-leading-normal: 1.55; --veus-leading-relaxed: 1.7; /* --- Tracking --- */ --veus-tracking-tight: -0.01em; --veus-tracking-normal: 0; --veus-tracking-wide: 0.06em; --veus-tracking-wider: 0.14em; --veus-tracking-widest: 0.28em; /* --- Espaçamento --- */ --veus-space-1: 0.25rem; --veus-space-2: 0.5rem; --veus-space-3: 0.75rem; --veus-space-4: 1rem; --veus-space-5: 1.25rem; --veus-space-6: 1.5rem; --veus-space-8: 2rem; --veus-space-10: 2.5rem; --veus-space-12: 3rem; --veus-space-16: 4rem; --veus-space-20: 5rem; --veus-space-24: 6rem; /* --- Radius --- */ --veus-radius-none: 0; --veus-radius-sm: 4px; --veus-radius-md: 8px; --veus-radius-lg: 16px; --veus-radius-xl: 24px; --veus-radius-2xl: 32px; --veus-radius-full: 9999px; /* --- Shadows (tinte cinza VEUS + glow amarelo) --- */ --veus-shadow-sm: 0 1px 2px rgba(89, 89, 89, 0.08); --veus-shadow-md: 0 2px 8px rgba(89, 89, 89, 0.10), 0 8px 24px rgba(89, 89, 89, 0.06); --veus-shadow-lg: 0 4px 16px rgba(89, 89, 89, 0.12), 0 16px 48px rgba(89, 89, 89, 0.10); --veus-shadow-glass: 0 8px 32px rgba(89, 89, 89, 0.18), 0 0 0 1px rgba(255, 179, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5); --veus-shadow-yellow: 0 4px 16px rgba(255, 179, 22, 0.18), 0 8px 32px rgba(255, 179, 22, 0.12); --veus-shadow-yellow-hover: 0 8px 28px rgba(255, 179, 22, 0.36), 0 16px 48px rgba(255, 179, 22, 0.22); /* --- Borders --- */ --veus-border-hairline: 1px solid var(--veus-gray-pale); --veus-border-subtle: 1px solid rgba(89, 89, 89, 0.08); --veus-border-input: 1.5px solid var(--veus-gray-pale); --veus-border-input-focus: 1.5px solid var(--veus-yellow); /* --- Curvas e durações --- */ --veus-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --veus-ease-in: cubic-bezier(0.55, 0, 0.92, 0.31); --veus-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --veus-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --veus-duration-instant: 100ms; --veus-duration-fast: 180ms; --veus-duration-normal: 280ms; --veus-duration-slow: 480ms; --veus-duration-slower: 800ms; --veus-duration-ambient: 22s; /* --- Z-index --- */ --veus-z-particles: -1; --veus-z-mesh: -2; --veus-z-base: 1; --veus-z-header: 50; --veus-z-elevated: 10; --veus-z-modal: 100; --veus-z-toast: 200; /* --- Layout --- */ --veus-card-width: 440px; --veus-content-max: 1200px; --veus-text-max: 65ch; } /* ===================================================================== DARK MODE — item 16 (Pedro 2026-06-10) · gucci-frontend · cloud@Alfred --------------------------------------------------------------------- Causa do bug original: base.html hardcodava data-theme="light" e não havia NENHUMA regra [data-theme="dark"], então light==dark. Estratégia (surgical, cascade-driven): o app inteiro é construído sobre tokens var(--veus-*). Em vez de reescrever centenas de regras por elemento, **invertemos os tokens de superfície e texto** sob [data-theme="dark"]. A cascata leva o tema escuro para cards, inputs, tabelas, badges, timeline, modal de certificado e header — tudo de graça. Só os pouquíssimos valores hardcoded (mesh conic em particles.css, rgba brancos de glass/shadow, #fffaf0 do cert-warn) ganham override explícito. Identidade VEUS preservada: amarelo Pantone 1235 C (#FFB316) continua o accent; cinza Pantone Cool Gray 11 C (#595959) segue como base — só que agora a paleta cresce PARA BAIXO (tons mais escuros do mesmo cinza) em vez de para cima. Gatilho: localStorage 'veus-juridico-theme' (set pelo toggle) tem prioridade; na 1ª visita cai em prefers-color-scheme (theme-boot.js). O atributo data-theme é sempre setado explicitamente ("light"|"dark"). Contraste WCAG AA auditado (texto sobre superfície): - --veus-gray-deep #f0f1f4 (texto principal) sobre card #212429 → 13.9:1 (AAA) - --veus-gray-deep #f0f1f4 sobre body #16181b → 15.6:1 (AAA) - --veus-gray-rich #d4d6db (texto 2º) sobre card #212429 → 10.3:1 (AAA) - --veus-gray-mid #a8abb2 (muted) sobre card #212429 → 6.3:1 (AA+) - --veus-gray-soft #8b8e96 (mais suave) sobre card #212429 → 4.5:1 (AA) - --veus-yellow #FFB316 (accent) sobre card #212429 → 8.9:1 (AAA) - borda --veus-gray-pale #3a3d44 sobre card #212429 (1.4.11 não-texto) → ~1.4:1 (decorativa); bordas FUNCIONAIS usam tokens de borda dedicados abaixo com ≥3:1. ===================================================================== */ :root[data-theme="dark"] { /* --- Cinza VEUS invertido: a escala cresce para baixo --- Mantém o pivô #595959 como referência de marca; tons "deep/rich" viram TEXTO claro, "pale/mist/fog/white" viram SUPERFÍCIES escuras. */ --veus-gray-pure: #9a9ca3; /* pivô neutro, levemente clareado p/ leitura */ /* Texto (antes escuros) → agora claros, em ordem de ênfase */ --veus-gray-deep: #f0f1f4; /* texto principal / headings — 15.6:1 no body */ --veus-gray-rich: #d4d6db; /* texto secundário — 10.3:1 no card */ --veus-gray-mid: #a8abb2; /* muted — 6.3:1 no card */ --veus-gray-soft: #8b8e96; /* mais suave (piso AA) — 4.5:1 no card */ /* Superfícies (antes claras) → agora escuras, do mais claro ao mais profundo */ --veus-gray-pale: #3a3d44; /* bordas hairline */ --veus-gray-ash: #2c2f35; /* dividers de tabela */ --veus-gray-mist: #262930; /* fundo sutil (badge, th hover) */ --veus-gray-fog: #1c1e22; /* fundo de table th / chips / pílulas */ --veus-white: #212429; /* SUPERFÍCIE de card/input/tabela/modal */ --veus-off-white: #1c1e22; /* Glass: vidro escuro translúcido (era branco translúcido) */ --veus-glass-bg: rgba(33, 36, 41, 0.72); --veus-glass-border: rgba(255, 255, 255, 0.08); /* --- Amarelo: na superfície escura o accent puro brilha (não precisa escurecer como no light). yellow-link volta a ser o amarelo vivo, que sobre #16181b dá ~10:1. --- */ --veus-yellow-link: #ffc04a; /* texto-link / eyebrows — 11.0:1 no body */ --veus-yellow-pale: rgba(255, 179, 22, 0.16); --veus-yellow-faint: rgba(255, 179, 22, 0.10); --veus-yellow-ghost: rgba(255, 179, 22, 0.05); /* --- Estados: backgrounds translúcidos ganham mais alpha p/ aparecer sobre superfície escura; texto de estado clareia. --- */ --veus-error: #ff6b61; --veus-error-bg: rgba(255, 107, 97, 0.14); --veus-success: #5fcf7e; --veus-success-bg: rgba(95, 207, 126, 0.16); /* --- Sombras: em dark, sombra preta funciona melhor que tinte cinza claro. Profundidade via preto + halo amarelo no glass. --- */ --veus-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --veus-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35); --veus-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.50), 0 16px 48px rgba(0, 0, 0, 0.40); --veus-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 179, 22, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Bordas funcionais — recomputadas p/ herdarem os novos tokens. A subtle/input usam rgba clara p/ atingir ≥3:1 (WCAG 1.4.11) sobre a superfície escura, ao contrário do light onde eram rgba(89,89,89). */ --veus-border-subtle: 1px solid rgba(255, 255, 255, 0.10); --veus-border-input: 1.5px solid rgba(255, 255, 255, 0.18); /* Fundo base da página (consumido por base.css `body`) */ --veus-page-bg: #16181b; color-scheme: dark; }