/* Tokens — padrão "Projetos TED Redesign" (§2 do design system). Fonte única de cores, tipografia, raios e sombras. Nunca hardcode. Tema claro padrão em :root; escuro via [data-theme="dark"] com toggle persistido em localStorage pelo common.js. Aliases --color-* mantidos para compatibilidade com componentes antigos durante a migração. Remover quando todos migrarem para os nomes novos. ⚠️ CONFLITO COM css/style.css (detectado abr/2026): Os tokens --sidebar-w, --drawer-w, --radius, --border, --text-muted também estão declarados em style.css com valores DIFERENTES. Como este arquivo carrega DEPOIS, seus valores VENCEM. Ao editar, tenha consciência de que alterar o valor aqui é o que efetivamente muda o layout em produção. Consolidação em docs/planos/refactor-backlog-2026-04-23.md (Etapa 1). */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* V3 visual baseline (jun/2026): Manrope/Geist-like, superfícies claras, bordas finas e densidade mais compacta. IBM Plex fica como fallback para páginas que ainda não carregaram a família nova. */ --font-display: 'Manrope', 'IBM Plex Sans', system-ui, sans-serif; --font-body: 'Manrope', 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Superfícies — light */ --bg: #f2f7fc; --bg-raised: #ffffff; --bg-sunken: #f8fbfe; --bg-hover: #ecf1f7; --border: #dfe7f0; --border-strong: #c7d3df; /* Texto */ --text: #102030; --text-muted: #3a4a5e; --text-faint: #7e8d9f; --text-disabled: #aebdcc; /* Accent — V3 teal institucional. */ --accent: #0e7c8c; --accent-hover: #0b6876; --accent-soft: rgba(14, 124, 140, 0.10); --accent-ring: rgba(14, 124, 140, 0.22); /* Status semânticos (par cor + soft) */ --status-ok: #3f7a5e; --status-ok-soft: rgba(63, 122, 94, 0.14); --status-warn: #a5742b; --status-warn-soft: rgba(165, 116, 43, 0.14); --status-crit: #a04a39; --status-crit-soft: rgba(160, 74, 57, 0.14); --status-neutral: #7e8d9f; --status-neutral-soft: rgba(126, 141, 159, 0.14); /* Cores por módulo — barras, ícones e contadores de cards do portal/hub. Mesma paleta dos overrides [data-module] abaixo; como token para uso em elementos individuais (card TED dentro da home, favoritos, etc.). */ --module-ted: #3a6788; --module-opas: #5a7a4f; --module-pronon: #a04a39; --module-proadi: #7a4d6e; --module-depto: #a5742b; --module-cgproj: #1c1c1a; --module-geral: #5f5aa5; /* Sizing + spacing */ --row-h: 36px; --row-h-compact: 30px; --sidebar-w: 232px; --drawer-w: 360px; --radius: 6px; --radius-sm: 5px; --radius-lg: 10px; /* Shadows — multi-layer sutis */ --shadow-xs: 0 1px 0 rgba(28, 28, 26, 0.04), 0 1px 2px rgba(28, 28, 26, 0.04); --shadow-sm: 0 1px 0 rgba(28, 28, 26, 0.04), 0 8px 24px rgba(28, 28, 26, 0.07); --shadow-md: 0 1px 0 rgba(28, 28, 26, 0.04), 0 12px 32px rgba(28, 28, 26, 0.08); --shadow-lg: 0 1px 0 rgba(28, 28, 26, 0.04), 0 18px 44px rgba(28, 28, 26, 0.12); /* Aliases diretos da V3 para compatibilidade com artefatos do ZIP. */ --paper: var(--bg); --raised: var(--bg-raised); --ink: var(--text); --ink-2: var(--text-muted); --muted: var(--text-faint); --hairline: var(--border); --hairline-2: var(--bg-hover); --primary: var(--accent); --primary-ink: #ffffff; --primary-tint: var(--accent-soft); --primary-tint-2: var(--accent-ring); /* ---- Aliases de compatibilidade — migração progressiva ---- */ /* Tokens legacy --font/--mono ainda referenciados em css/style.css (linhas 26-28, 134, 145, 160, 205, 211, 216, 240, 245, 249, 256, 258, 306, 335, 487-488). Sem isso, var() não resolve e o user-agent cai em font-family: serif (Times). Manter até style.css ser purgado. */ --font: var(--font-body); --mono: var(--font-body); --font-sans: var(--font-body); /* Aliases legacy de SUPERFÍCIE / TEXTO / BORDA — removidos no Leva 2 do refactor mas o style.css (~65 referências) ainda usa. Sem aliases o var() vira initial value em dark mode, gerando background transparente e text canvastext (preto sobre fundo escuro = ilegível). Migrar quando style.css for purgado. */ --navy: var(--bg); --navy-light: var(--bg-raised); --navy-mid: var(--bg-hover); --auth-bg: var(--bg); --surface: var(--bg-sunken); --surface-raised: var(--bg-raised); --surface-hover: var(--bg-hover); --text-primary: var(--text); --text-secondary: var(--text-muted); --border-light: var(--border); --shadow: var(--shadow-sm); --color-bg: var(--bg); --color-surface: var(--bg-raised); --color-surface-alt: var(--bg-sunken); --color-surface-2: var(--bg-sunken); --color-surface-3: var(--bg-hover); /* Aliases legacy SEM prefixo --color- usados por style.css e pronon/ted legacy (nunca definidos → var() caía em fallback claro hardcoded e quebrava o dark mode). green/orange/red seguem --status-* (têm variante dark); --surface-2 segue --bg-sunken; --accent-blue tem override no dark. */ --surface-2: var(--bg-sunken); --accent-green: var(--status-ok); --accent-blue: #2f74b5; --accent-orange: var(--status-warn); --accent-red: var(--status-crit); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-text: var(--text); --color-text-muted: var(--text-muted); --color-text-soft: var(--text-faint); --color-primary: var(--accent); --color-primary-600: var(--accent-hover); --color-primary-50: var(--accent-soft); --color-primary-soft: var(--accent-soft); --color-success: var(--status-ok); --color-success-50: var(--status-ok-soft); --color-warning: var(--status-warn); --color-warning-50: var(--status-warn-soft); --color-danger: var(--status-crit); --color-danger-50: var(--status-crit-soft); --color-info: var(--accent); --color-info-50: var(--accent-soft); --color-accent: var(--accent); --radius-md: var(--radius); --radius-xl: var(--radius-lg); --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --shell-sidebar-w: var(--sidebar-w); --shell-topbar-h: 52px; --topbar-h: var(--shell-topbar-h); --side-panel-w: var(--drawer-w); /* Aliases semânticos de tipografia (HANDOFF.md §2 do design system). Uso: font: var(--t-display) → títulos / var(--t-kpi) → KPIs / etc. Mantém família + peso + tamanho + line-height alinhados com SKILL.md. */ --t-display: 700 28px/1.05 var(--font-display); --t-heading: 700 22px/1.1 var(--font-display); --t-title: 600 18px/1.2 var(--font-display); --t-body: 400 13.5px/1.5 var(--font-body); --t-label: 600 10.5px/1 var(--font-body); --t-small: 400 11px/1.4 var(--font-body); --t-mono: 400 12.5px/1 var(--font-mono); --t-kpi: 700 28px/1 var(--font-display); /* Paleta vibrante aspiracional — uso pontual em alertas, status custom ou highlights premium (dark mode). Não substitui --status-* nem --accent; são só atalhos para hexes nomeados quando o oklch fica abstrato demais. */ --brand-indigo: #6366F1; --brand-teal: #14B8A6; --brand-cyan: #06B6D4; --brand-amber: #F59E0B; --brand-coral: #EF4444; --brand-lime: #84CC16; /* Escala semântica de z-index — usar var(--z-*) em vez de números mágicos. Faixas reservadas: 0 base (fluxo normal) 10 sticky (thead, toolbars aderentes) 20 conteúdo interno de drawer/modal 30 handles (resize, drag) 40–50 drawers/painéis laterais 59–60 overlay + modal dialog 70 toast notifications 80 tooltip 90 confirm dialog (bloqueia tudo) 9999 debug/emergência (evitar em produção) */ --z-base: 0; --z-sticky: 10; --z-drawer-inner: 20; --z-handle: 30; --z-drawer: 40; --z-side-panel: 50; --z-modal-overlay: 59; --z-modal: 60; --z-toast: 70; --z-tooltip: 80; --z-confirm: 90; --z-debug: 9999; } /* Dark mode — ativado via data-theme="dark" no , toggle pelo common.js */ [data-theme="dark"] { --bg: #0e1620; --bg-raised: #1c2937; --bg-sunken: #15202d; --bg-hover: #1f2c3a; --border: #2a3a4d; --border-strong: #3a5068; --text: #e4ecf5; --text-muted: #b8c6d4; --text-faint: #7c8a99; --text-disabled: #566476; --accent: #0e7c8c; --accent-hover: #1c9aac; --accent-soft: rgba(14, 124, 140, 0.18); --accent-ring: rgba(14, 124, 140, 0.32); --status-ok: #68a684; --status-ok-soft: rgba(104, 166, 132, 0.16); --status-warn: #d5a35b; --status-warn-soft: rgba(213, 163, 91, 0.16); --status-crit: #d47b66; --status-crit-soft: rgba(212, 123, 102, 0.16); --status-neutral: #8fa1b4; --status-neutral-soft: rgba(143, 161, 180, 0.16); /* Override dark do alias legacy --accent-blue (os demais seguem --status-*). */ --accent-blue: #6f9fbd; /* Cores por módulo — variantes dark (mesmos valores dos overrides [data-theme="dark"] body[data-module] abaixo). */ --module-ted: #6f9fbd; --module-opas: #8daf7f; --module-pronon: #d47b66; --module-proadi: #aa79a0; --module-depto: #d5a35b; --module-cgproj: #d2d8df; --module-geral: #9f9ad9; --shadow-xs: 0 1px 0 rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 1px 0 rgba(0,0,0,0.40), 0 12px 32px rgba(0,0,0,0.46); --shadow-md: 0 1px 0 rgba(0,0,0,0.42), 0 16px 40px rgba(0,0,0,0.50); --shadow-lg: 0 1px 0 rgba(0,0,0,0.44), 0 24px 60px rgba(0,0,0,0.58); } /* Branding leve por secretaria. SAES segue a paleta V3. */ [data-secretaria="SAES"] { --accent: #0e7c8c; --accent-hover: #0b6876; --accent-soft: rgba(14, 124, 140, 0.10); --accent-ring: rgba(14, 124, 140, 0.22); } [data-secretaria="SE"] { --accent: #3a6788; --accent-hover: #2e536d; --accent-soft: rgba(58, 103, 136, 0.12); --accent-ring: rgba(58, 103, 136, 0.24); } [data-secretaria="CNS"] { --accent: #3f7a5e; --accent-hover: #326149; --accent-soft: rgba(63, 122, 94, 0.12); --accent-ring: rgba(63, 122, 94, 0.24); } [data-secretaria="MAN"] { --accent: #7a4d6e; --accent-hover: #613d58; --accent-soft: rgba(122, 77, 110, 0.12); --accent-ring: rgba(122, 77, 110, 0.24); } [data-theme="dark"][data-secretaria="SAES"] { --accent: #1c9aac; --accent-hover: #27b5c8; --accent-soft: rgba(14, 124, 140, 0.20); --accent-ring: rgba(14, 124, 140, 0.34); } [data-theme="dark"][data-secretaria="SE"] { --accent: #6f9fbd; --accent-hover: #8bb8d2; --accent-soft: rgba(111, 159, 189, 0.18); --accent-ring: rgba(111, 159, 189, 0.32); } [data-theme="dark"][data-secretaria="CNS"] { --accent: #68a684; --accent-hover: #7fbe9b; --accent-soft: rgba(104, 166, 132, 0.18); --accent-ring: rgba(104, 166, 132, 0.32); } [data-theme="dark"][data-secretaria="MAN"] { --accent: #aa79a0; --accent-hover: #c18bb6; --accent-soft: rgba(170, 121, 160, 0.18); --accent-ring: rgba(170, 121, 160, 0.32); } /* Cores por MÓDULO — data-module no sobrepõe data-secretaria no . Mapeia as cores do ZIP SISPROJ_V3. */ [data-module="index"], [data-module="pd"] { --accent: #0e7c8c; --accent-hover: #0b6876; --accent-soft: rgba(14, 124, 140, 0.10); --accent-ring: rgba(14, 124, 140, 0.22); } [data-module="ted"] { --accent: #3a6788; --accent-hover: #2e536d; --accent-soft: rgba(58, 103, 136, 0.12); --accent-ring: rgba(58, 103, 136, 0.24); } [data-module="opas"] { --accent: #5a7a4f; --accent-hover: #48623f; --accent-soft: rgba(90, 122, 79, 0.12); --accent-ring: rgba(90, 122, 79, 0.24); } [data-module="pronon"] { --accent: #a04a39; --accent-hover: #803b2e; --accent-soft: rgba(160, 74, 57, 0.12); --accent-ring: rgba(160, 74, 57, 0.24); } [data-module="proadi"] { --accent: #7a4d6e; --accent-hover: #613d58; --accent-soft: rgba(122, 77, 110, 0.12); --accent-ring: rgba(122, 77, 110, 0.24); } [data-module="depto"] { --accent: #a5742b; --accent-hover: #835c22; --accent-soft: rgba(165, 116, 43, 0.12); --accent-ring: rgba(165, 116, 43, 0.24); } [data-module="cgproj"] { --accent: #1c1c1a; --accent-hover: #33332f; --accent-soft: rgba(28, 28, 26, 0.10); --accent-ring: rgba(28, 28, 26, 0.20); } [data-module="cgprojp"] { --accent: #5f5aa5; --accent-hover: #4d4985; --accent-soft: rgba(95, 90, 165, 0.12); --accent-ring: rgba(95, 90, 165, 0.24); } [data-module="aprovador"] { --accent: #3f7a5e; --accent-hover: #326149; --accent-soft: rgba(63, 122, 94, 0.12); --accent-ring: rgba(63, 122, 94, 0.24); } [data-module="geral"] { --accent: #5f5aa5; --accent-hover: #4d4985; --accent-soft: rgba(95, 90, 165, 0.12); --accent-ring: rgba(95, 90, 165, 0.24); } [data-module="manuais"] { --accent: #3a3a36; --accent-hover: #56564f; --accent-soft: rgba(58, 58, 54, 0.10); --accent-ring: rgba(58, 58, 54, 0.20); } [data-module="dev"] { --accent: #5a5a55; --accent-hover: #444440; --accent-soft: rgba(90, 90, 85, 0.12); --accent-ring: rgba(90, 90, 85, 0.22); } /* IMPORTANTE: data-theme está no e data-module está no — o seletor `[data-theme="dark"][data-module="X"]` exige ambos no MESMO elemento e nunca aplica. Usar descendant `[data-theme="dark"] body[data-module="X"]`. */ [data-theme="dark"] body[data-module="ted"] { --accent: #6f9fbd; --accent-hover: #8bb8d2; --accent-soft: rgba(111, 159, 189, 0.18); --accent-ring: rgba(111, 159, 189, 0.32); } [data-theme="dark"] body[data-module="opas"] { --accent: #8daf7f; --accent-hover: #a4c696; --accent-soft: rgba(141, 175, 127, 0.18); --accent-ring: rgba(141, 175, 127, 0.32); } [data-theme="dark"] body[data-module="pronon"] { --accent: #d47b66; --accent-hover: #e89480; --accent-soft: rgba(212, 123, 102, 0.18); --accent-ring: rgba(212, 123, 102, 0.32); } [data-theme="dark"] body[data-module="proadi"] { --accent: #aa79a0; --accent-hover: #c18bb6; --accent-soft: rgba(170, 121, 160, 0.18); --accent-ring: rgba(170, 121, 160, 0.32); } [data-theme="dark"] body[data-module="pd"] { --accent: #1c9aac; --accent-hover: #27b5c8; --accent-soft: rgba(14, 124, 140, 0.20); --accent-ring: rgba(14, 124, 140, 0.34); } [data-theme="dark"] body[data-module="depto"] { --accent: #d5a35b; --accent-hover: #edba70; --accent-soft: rgba(213, 163, 91, 0.18); --accent-ring: rgba(213, 163, 91, 0.32); } [data-theme="dark"] body[data-module="cgproj"] { --accent: #d2d8df; --accent-hover: #ffffff; --accent-soft: rgba(210, 216, 223, 0.14); --accent-ring: rgba(210, 216, 223, 0.28); } [data-theme="dark"] body[data-module="cgprojp"], [data-theme="dark"] body[data-module="geral"] { --accent: #9f9ad9; --accent-hover: #bbb6ee; --accent-soft: rgba(159, 154, 217, 0.18); --accent-ring: rgba(159, 154, 217, 0.32); }