/* ============================================================ MTZ FLOW · Design Tokens · v2.0 "marketing que vira o jogo" ------------------------------------------------------------ Sincronizado com o MTZ Design System v2.0 (2026) e com a Identidade Visual oficial (MTZ-IDV). O que mudou na v2.0: · A SETA MTZ substitui o asterisco em todos os usos. · Entram o SELO (seta em círculo verde) e a ASSINATURA tipográfica como ativos oficiais. · Serifada de display volta ao sistema (PP Editorial New · substituta web Fraunces) para títulos e frases de marca. · Verde legível de texto passa a #53790C (4,8:1). O #6AA800 vira "verde de gráfico" (--green-mid), proibido em texto pequeno. · Cinzas de texto escurecem para passar AA: --muted #656585 (5,3:1) e --muted-2 #8B86A6. ------------------------------------------------------------ Estes valores são a ÚNICA fonte de verdade visual do sistema. Todas as cores, tipografias, raios, sombras e espaçamentos derivam daqui. Nada de cor "hardcoded" fora deste arquivo. ============================================================ */ :root { /* ---- Cores da marca ---- */ --mtz-blue: #1313E1; /* Azul MTZ · primária: logo, Seta, títulos, CTAs, links */ --mtz-magenta: #EC00A9; /* Magenta MTZ · energia, destaque, "queda/negativo" */ --mtz-green: #A1E918; /* Verde MTZ · ação e vitória, círculo do Selo, "alta/positivo" */ --mtz-indigo: #180340; /* Indigo profundo · superfície escura */ --mtz-white: #F9F7FF; /* Off-white · canvas padrão */ --mtz-black: #000000; --mtz-pure: #FFFFFF; /* ---- Variações operacionais ---- */ --blue-press: #0F0FB4; --blue-ink: #0C0CA0; --blue-soft: #E7E7FF; --blue-soft-2:#D3D3FF; --magenta-press:#C4008D; --magenta-soft: #FFE3F6; --green-press:#8FD400; --green-deep: #53790C; /* verde LEGÍVEL p/ texto · 4,8:1 sobre off-white (DS v2.0) */ --green-mid: #6AA800; /* verde de gráfico/ícone · NÃO usar em texto pequeno */ --green-soft: #EEFBC9; --indigo-2: #25105C; /* indigo elevado */ --indigo-3: #2F1A6E; --indigo-4: #3A2380; /* ---- Marca aplicada em TEXTO ---- A marca "cheia" (--mtz-blue, --mtz-indigo, --magenta-press) é para PREENCHIMENTO: fundo de botão, caixa marcada, borda de foco. Quando a MESMA cor precisa virar TEXTO, use os tokens abaixo — eles trocam de valor no tema escuro para o contraste não quebrar. (Sem essa separação, clarear --mtz-blue no escuro estragaria o fundo do botão primário, e mantê-lo escuro deixaria o texto ilegível.) */ --brand-ink: #1313E1; /* azul MTZ como texto · 9,5:1 sobre branco */ --brand-ink-2: #0C0CA0; /* azul fechado p/ chips claros · 12,4:1 */ --indigo-ink: #180340; /* indigo como texto · 17,6:1 */ --mag-ink: #C4008D; /* magenta como texto · 6,1:1 */ /* ---- Texto ---- */ --ink: #180340; /* títulos sobre claro · 17,6:1 */ --body: #4B4568; /* corpo sobre claro · 8,4:1 */ --muted: #656585; /* secundário · 5,3:1 (AA em texto pequeno) */ --muted-2:#8B86A6; /* placeholders e microcopy de apoio */ --on-dark: #F9F7FF; --on-dark-soft: rgba(249,247,255,.66); --on-dark-mute: rgba(249,247,255,.42); /* ---- Superfícies ---- */ --surface: #FFFFFF; --surface-soft: #F2F0FB; --surface-strong: #E9E7F6; --canvas: #F4F2FC; /* fundo geral do app */ /* ---- Hairlines / bordas ---- */ --hair: rgba(24,3,64,.12); --hair-2: rgba(24,3,64,.08); --hair-3: rgba(24,3,64,.20); --hair-dark: rgba(249,247,255,.16); --hair-dark-2: rgba(249,247,255,.09); /* ---- Cores semânticas (derivadas da marca · sem vermelho) ---- */ --ok: #53790C; /* sucesso / no prazo · verde legível */ --ok-bg: #EEFBC9; --warn: #9A5700; /* atenção / risco médio · âmbar legível · 5,6:1 sobre branco e 4,9:1 sobre --warn-bg */ --warn-strong: #E8890C; /* âmbar de gráfico e barra (não usar em texto pequeno) */ --warn-bg: #FDEED6; --danger: #EC00A9; /* crítico / atrasado · magenta substitui o vermelho */ --danger-bg:#FFE3F6; --info: #1313E1; /* neutro / informativo */ --info-bg: #E7E7FF; /* ---- Tipografia ---- */ /* Três famílias auto-hospedadas (assets/css/fonts.css). --serif : display · títulos de página, heros e frases de marca. Oficial licenciada: 'PP Editorial New'. Substituta web homologada pelo DS: Fraunces. A pilha já contempla as duas — basta subir os .woff2 da licenciada em /assets/fonts. --sans : Inter · texto, interface e TODOS os números. --mono : JetBrains Mono · conteúdo técnico. */ --serif: 'PP Editorial New', 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Pesos do display (DS v2.0: 400–460, itálico expressivo) */ --serif-w-hero: 420; --serif-w-sec: 450; /* ---- Ativos de marca ---- */ /* A Seta MTZ · path oficial, viewBox 0 0 300 300 · 6 pontos, sem curvas. Usada como máscara recolorível em bullets, ícones e pseudo-elementos. */ --mtz-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M100 0H300V200L200 300V100H0Z'/%3E%3C/svg%3E"); /* Proporções travadas dos ativos · não alterar */ --ar-logo: 2.2388; /* logotipo mtz company */ --ar-mark: 2.9900; /* logotipo reduzido mtz */ --ar-sig: 1.6204; /* assinatura "marketing que vira o jogo" */ /* ---- Raios ---- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; --r-full: 9999px; /* ---- Espaçamentos (base 4px) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; /* ---- Sombras ---- */ --sh-xs: 0 1px 3px rgba(24,3,64,.06); --sh-sm: 0 2px 10px rgba(24,3,64,.06); --sh-md: 0 18px 48px -20px rgba(24,3,64,.28); --sh-lg: 0 40px 90px -30px rgba(24,3,64,.40); --sh-blue: 0 20px 60px -18px rgba(19,19,225,.45); /* ---- Layout do app ---- */ --sidebar-w: 264px; --sidebar-w-collapsed: 76px; --topbar-h: 68px; --content-max: 1480px; /* Densidade da interface · ver bloco [data-density="compacta"] no fim */ /* ---- Curvas de animação ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --dur: .22s; /* ---- z-index ---- */ --z-sidebar: 60; --z-topbar: 55; --z-drawer: 80; --z-modal: 100; --z-toast: 120; --z-tooltip: 130; color-scheme: light; } /* ============================================================ TEMA ESCURO · superfície Indigo do Design System Ativado por Configurações → Preferências (persistido por usuário) ou automaticamente com "Seguir o sistema". Só os tokens mudam · nenhum componente precisa de CSS próprio. ============================================================ */ [data-theme="dark"] { --ink: #F9F7FF; --body: rgba(249,247,255,.78); --muted: rgba(249,247,255,.60); --muted-2:rgba(249,247,255,.42); --surface: #220F55; --surface-soft: #1C0949; --surface-strong: #2F1A6E; --canvas: #140237; --hair: rgba(249,247,255,.14); --hair-2: rgba(249,247,255,.09); --hair-3: rgba(249,247,255,.22); --blue-soft: #241B7A; --blue-soft-2:#2C22A0; --magenta-soft: #46113A; --green-soft: #2A3D0B; --ok: #A1E918; --ok-bg: #2A3D0B; --warn: #F0A537; --warn-strong: #E8890C; --warn-bg: #3D2A08; --danger: #FF57C6; --danger-bg:#46113A; --info: #8E8EFF; --info-bg: #241B7A; --green-deep: #A1E918; /* sobre indigo o verde puro é o legível (12,6:1) */ --green-mid: #A1E918; /* Marca em texto · versões claras para sobreviver ao fundo indigo. Os tokens de preenchimento (--mtz-blue, --mtz-indigo) continuam com o valor original: botão primário e caixas marcadas seguem com a cor da marca cheia e texto branco por cima. */ --brand-ink: #B9B9FF; /* 8,9:1 sobre superfície escura */ --brand-ink-2: #CFCFFF; /* 11,4:1 · chips de score */ --indigo-ink: #F9F7FF; /* 15,7:1 · onde antes era indigo sobre claro */ --mag-ink: #FF8FDA; /* 7,3:1 sobre fundo de alerta escuro */ --sh-xs: 0 1px 3px rgba(0,0,0,.35); --sh-sm: 0 2px 10px rgba(0,0,0,.35); --sh-md: 0 18px 48px -20px rgba(0,0,0,.65); --sh-lg: 0 40px 90px -30px rgba(0,0,0,.75); color-scheme: dark; } /* Densidade compacta */ [data-density="compacta"] { --density: .72; } /* Sem animações (preferência do usuário ou do sistema operacional) */ [data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================================================ DENSIDADE COMPACTA · aplicada de verdade Reduz o respiro vertical de tabelas, cards e listas para caber mais informação na tela, sem mexer na hierarquia visual. ============================================================ */ [data-density="compacta"] .card { padding: 17px; } [data-density="compacta"] .card--pad-lg { padding: 22px; } [data-density="compacta"] .card__head { margin-bottom: 13px; } [data-density="compacta"] .tbl thead th { padding: 10px 13px; } [data-density="compacta"] .tbl tbody td { padding: 9px 13px; } [data-density="compacta"] .task-card { padding: 11px 11px 10px 13px; } [data-density="compacta"] .task-card .tc-title { font-size: 13.5px; margin-bottom: 8px; } [data-density="compacta"] .task-card .tc-top, [data-density="compacta"] .task-card .tc-tags, [data-density="compacta"] .task-card .tc-prog, [data-density="compacta"] .task-card .tc-due { margin-bottom: 7px; } [data-density="compacta"] .kanban__list { gap: 8px; } [data-density="compacta"] .mb-5 { margin-bottom: 18px !important; } [data-density="compacta"] .mb-4 { margin-bottom: 14px !important; } [data-density="compacta"] .content { padding-block: 18px; } [data-density="compacta"] .setting-row, [data-density="compacta"] .svc-item, [data-density="compacta"] .file-row { padding-block: 8px; } [data-density="compacta"] .stat { padding: 15px; } [data-density="compacta"] .page-head { margin-bottom: 16px; } /* Dicas desligadas: esconde tooltips e atalhos de teclado */ [data-tips="off"] [data-tooltip]::after, [data-tips="off"] [data-tooltip]::before { display: none !important; } [data-tips="off"] .topbar__search kbd { display: none; }