/* ========================================================= PDO v2 — Identidade institucional: TOKENS (PLANO_PDO_V2.md §10.2/§10.3 — Etapa 3, V2-FE-002) Ordem de carregamento obrigatória: tabler.min.css → pdo-tokens.css → pdo-bridge.css → pdo-components.css Os temas são chaveados por data-bs-theme no (padrão Tabler/BS 5.3). Direção da identidade: grafite neutro (escuro) / papel frio (claro), acento único institucional #17a2b8 (mesmo hex nos dois temas — só o hover varia por tema), cores por área como código funcional, sombras contidas, sem ornamento. Escala de superfícies do tema escuro (decisão do Kevin, 2ª rodada da Etapa 3): para dar impressão de mudança legítima no tema que a maioria usa, o fundo escuro passa a começar no tom antes usado como "superfície" — ou seja, a base ficou um degrau mais clara do que a v1. "Superfície 3" se mantém como teto da escala; "superfície" e "superfície 2" novos são variações sutis dentro da faixa entre o novo "fundo suave" e "superfície 3". ========================================================= */ /* ── Tipografia oficial: Inter variável (build oficial rsms/inter via inter-ui, self-hosted — nunca Google Fonts). Eixos: wght 100–900 + opsz 14–32 (títulos usam o corte óptico da própria família). */ @font-face { font-family: "InterVariable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../vendor/inter/InterVariable.2bf3d951bf9d.woff2") format("woff2"); } @font-face { font-family: "InterVariable"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../../vendor/inter/InterVariable-Italic.8d1dc86da258.woff2") format("woff2"); } :root { --font-ui: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* ═══════════════ TEMA ESCURO — grafite institucional ═══════════════ */ /* Seletor com "html" (não só [data-bs-theme]) por especificidade: precisa empatar ou superar html[data-theme="dark"] do base.css (0,1,1) para o override vencer de forma confiável quando os dois convivem no shell — ver AGENTS.md / docs/v2/frontend_pipeline.md. */ html[data-bs-theme="dark"] { color-scheme: dark; /* Redefine o token --app-font (não só a fonte do body): dezenas de regras em módulos legados (maquinas.css, cadastros.css, etc.) referenciam var(--app-font) diretamente — este único ponto propaga a Inter para todo o sistema sem tocar nesses arquivos. */ --app-font: var(--font-ui); /* Superfícies — grafite neutro, sem o tingido azulado da v1. Escala deslocada um degrau (ver nota acima): fundo = antiga superfície; superfície/superfície 2 são variações novas e sutis; superfície 3 é o mesmo teto de sempre. */ --app-bg: #1a1e25; --app-bg-soft: #20252d; --app-surface: #222830; --app-surface-2: #252a34; --app-surface-3: #272d37; --app-text: #e9edf3; --app-text-2: rgba(233, 237, 243, .72); --app-text-3: rgba(233, 237, 243, .54); /* Acento institucional único — #17a2b8, mesmo hex nos dois temas. Hover mais claro no escuro (efeito de "elevação" sobre fundo escuro); texto sobre acento = tinta escura (contraste ~6,2:1, AA folgado). */ --app-accent: #17a2b8; --app-accent-2: #4ab6c8; --app-accent-rgb: 23, 162, 184; --app-on-accent: #0d1320; --app-on-semantic: #0d1320; --app-border: rgba(255, 255, 255, .08); --app-border-strong: rgba(255, 255, 255, .15); /* Sombras contidas — profundidade vem de borda + superfície, não de blur */ --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --app-shadow-md: 0 2px 8px rgba(0, 0, 0, .35); --app-shadow-lg: 0 8px 24px rgba(0, 0, 0, .40); --app-radius: 6px; /* Acentos semânticos — status, badges, indicadores. Texto = cor cheia; -soft = fundo translúcido. */ --accent-success: #43bd88; --accent-success-rgb: 67, 189, 136; --accent-success-soft: rgba(67, 189, 136, .14); --accent-info: #5ea3e8; --accent-info-rgb: 94, 163, 232; --accent-info-soft: rgba(94, 163, 232, .14); --accent-warning: #e08a3c; --accent-warning-rgb: 224, 138, 60; --accent-warning-soft: rgba(224, 138, 60, .14); --accent-yellow: #d9b13b; --accent-yellow-rgb: 217, 177, 59; --accent-yellow-soft: rgba(217, 177, 59, .14); --accent-danger: #e06c6c; --accent-danger-rgb: 224, 108, 108; --accent-danger-soft: rgba(224, 108, 108, .14); /* Cores por área — código funcional (ponto, tique, borda fina); nunca preenchimento decorativo. Tom claro no escuro. */ --area-estoque: #3fbfae; --area-fiscal: #a495ec; --area-montagem: #dfa844; --area-pcp: #54b3e4; --area-insumos: #62c37e; --area-maquinas: #e8849b; --area-projetos: #82a2ee; --area-usinagem: #cf8868; --area-laboratorio: #9c8ce0; --area-sac: #d67bb0; } /* ═══════════════ TEMA CLARO — papel institucional ═══════════════ */ html[data-bs-theme="light"] { color-scheme: light; --app-font: var(--font-ui); --app-bg: #f3f5f8; --app-bg-soft: #edf0f4; --app-surface: #ffffff; --app-surface-2: #f7f9fb; --app-surface-3: #eef1f5; --app-text: #1a2536; --app-text-2: rgba(26, 37, 54, .72); --app-text-3: rgba(26, 37, 54, .55); /* Acento institucional único — #17a2b8, mesmo hex do tema escuro. Hover mais escuro no claro; texto sobre acento = tinta escura (branco cairia a ~3:1 de contraste, abaixo do AA para texto normal). */ --app-accent: #17a2b8; --app-accent-2: #117a8a; --app-accent-rgb: 23, 162, 184; --app-on-accent: #0d1320; --app-on-semantic: #ffffff; --app-border: rgba(26, 37, 54, .12); --app-border-strong: rgba(26, 37, 54, .18); --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --app-shadow-md: 0 2px 8px rgba(16, 24, 40, .07); --app-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10); --app-radius: 6px; /* Acentos semânticos — tons profundos p/ contraste sobre papel */ --accent-success: #197a4e; --accent-success-rgb: 25, 122, 78; --accent-success-soft: rgba(25, 122, 78, .12); --accent-info: #1a72c4; --accent-info-rgb: 26, 114, 196; --accent-info-soft: rgba(26, 114, 196, .12); --accent-warning: #b05e10; --accent-warning-rgb: 176, 94, 16; --accent-warning-soft: rgba(176, 94, 16, .12); --accent-yellow: #96700a; --accent-yellow-rgb: 150, 112, 10; --accent-yellow-soft: rgba(150, 112, 10, .12); --accent-danger: #bb3f3f; --accent-danger-rgb: 187, 63, 63; --accent-danger-soft: rgba(187, 63, 63, .12); /* Cores por área — tom profundo da mesma família no claro */ --area-estoque: #0e7d6f; --area-fiscal: #5b44b8; --area-montagem: #96660c; --area-pcp: #106e9e; --area-insumos: #1d7a3e; --area-maquinas: #b23b58; --area-projetos: #2f52b3; --area-usinagem: #96502f; --area-laboratorio: #5142ad; --area-sac: #93327c; }