/* ═══════════════════════════════════════════════════════════════════════════ PERGOR · TOKENS · MANUAL DE MARCA v4 (2026) Fonte: DesignPergorv4.pdf · uso interno · marca@pergor.com As cinco regras do manual, que este arquivo existe para sustentar: 01 · Nunca redesenhe a marca. Use o arquivo original. 02 · Grafite sustenta, Azul Sinal aciona, Verde Meta confirma. 03 · Um acento por tela. Uma ação principal por tela. 04 · Space Grotesk titula, IBM Plex Sans explica, Mono mede. 05 · Nada decora. Cada elemento leva à próxima ação. PROPORÇÃO DE USO — grafite 60% · aço 25% · azul 10% · verde 5%. Azul e verde são ACENTOS: se aparecerem demais, deixam de sinalizar. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ═══ PALETA PRIMÁRIA · quatro cores, cada uma com um papel ═══════════════ */ --pg-grafite: #12181C; /* base — sustenta a composição */ --pg-aco: #3B4A56; /* apoio estrutural */ --pg-azul: #1F6FEB; /* AÇÃO — marca tudo o que é acionável */ --pg-verde: #00A67D; /* RESULTADO ATINGIDO — meta batida, e nada mais */ /* ═══ NEUTROS · viés frio, herdado do grafite ═════════════════════════════ Nunca cinza puro, nunca preto absoluto. */ --pg-preto-grafite: #12181C; /* texto forte */ --pg-cinza-grafite: #4C5A64; /* corpo de texto */ --pg-cinza-medio: #7C8994; /* texto auxiliar */ --pg-cinza-linha: #DCE1E4; /* bordas */ --pg-cinza-nevoa: #F7F8F8; /* fundo de tela */ --pg-branco: #ffffff; /* passos derivados, para superfície e estado — não são cores novas, são o mesmo viés frio clareado ou escurecido */ --pg-aco-900: #1B242B; --pg-aco-800: #26323A; --pg-aco-700: #2F3E48; --pg-aco-400: #667684; --pg-cinza-200: #EDEFF1; --pg-cinza-100: #F2F4F5; --pg-azul-pressionado: #1A5FD0; --pg-azul-claro: #4A8CF0; /* azul sobre grafite, onde o #1F6FEB fecha */ --pg-azul-veu: #E8F0FE; /* fundo de chip/campo ativo */ --pg-verde-claro: #22C99B; /* verde sobre grafite */ --pg-verde-veu: #E2F6F0; /* fundo de chip "meta batida" */ /* ATRASO · o manual desenha o chip "Ação atrasada" em vermelho sobre véu rosa, mas não publica o hex. Estes dois são derivados e ficam PENDENTES de confirmação com o time de marca. O âmbar da v2.1 não existe mais. */ --pg-atraso: #D64545; --pg-atraso-veu: #FDECEC; /* ═══ TOKENS SEMÂNTICOS · TEMA CLARO ══════════════════════════════════════ O padrão do produto. Fundo Cinza Névoa, conteúdo em branco. */ --bg-canvas: var(--pg-cinza-nevoa); --bg-surface: var(--pg-branco); --bg-accent-soft: var(--pg-azul-veu); --border-default: var(--pg-cinza-linha); --border-strong: #C6CDD2; --text-primary: var(--pg-preto-grafite); --text-secondary: var(--pg-cinza-grafite); --text-muted: var(--pg-cinza-medio); --action-default: var(--pg-azul); --action-pressed: var(--pg-azul-pressionado); --accent-live: var(--pg-azul); --status-obtido: var(--pg-verde); --status-atraso: var(--pg-atraso); --status-alerta: var(--pg-atraso); /* ═══ TIPOGRAFIA ══════════════════════════════════════════════════════════ Regra 04: Space Grotesk titula, IBM Plex Sans explica, Mono mede. Grotesk só em Medium 500 e SemiBold 600 — nunca Light, nunca Bold. Mono SEMPRE em caixa alta, com 0,18em de entreletra. */ --pg-display: "Space Grotesk", "IBM Plex Sans", -apple-system, sans-serif; --pg-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --pg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --pg-rotulo-tracking: .18em; /* escala do manual — peça e app em pé. Em tela densa de sede, o padrão v3 usa passos menores; o que não muda é QUAL família cumpre cada papel. */ --pg-display-tam: 60px; /* 60/64, tracking -2% */ --pg-titulo-tam: 40px; /* 40/46 */ --pg-subtitulo-tam: 28px; /* 28/36, Sans 600 */ --pg-corpo-tam: 24px; /* 24/37, Sans 400 */ --pg-rotulo-tam: 19px; /* Mono 500, +18% */ --pg-corpo-sede: 15px; --pg-corpo-campo: 17px; /* ═══ ESPAÇAMENTO · a escala do manual ════════════════════════════════════ 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */ --esp-4: 4px; --esp-8: 8px; --esp-12: 12px; --esp-16: 16px; --esp-20: 16px; /* 20 não existe na escala v4: cai para 16 */ --esp-24: 24px; --esp-32: 32px; --esp-40: 48px; /* 40 não existe: sobe para 48 */ --esp-48: 48px; --esp-56: 48px; --esp-64: 64px; --esp-72: 64px; /* ═══ RAIO · por componente, não por gosto ════════════════════════════════ 4 chip · 10 input · 16 card · 28 botão */ --raio-chip: 4px; --raio-input: 10px; --raio-card: 16px; --raio-botao: 28px; --raio-0: 0; --raio-2: 4px; --raio-4: 4px; --raio-8: 10px; --raio-pilula: 999px; /* ═══ TOQUE E GRID ════════════════════════════════════════════════════════ Nenhuma área tocável abaixo de 48px de altura. */ --alvo-toque: 48px; --alvo-campo: 48px; --alvo-sede: 38px; /* tela de sede, com mouse — ver nota do padrão v3 */ --leitura-max: 72ch; /* ═══ ELEVAÇÃO ════════════════════════════════════════════════════════════ Borda para conteúdo. Sombra SÓ para o que flutua sobre a tela. Nenhum gradiente, nenhum glow — regra 05. */ --borda: 1px solid var(--border-default); --borda-forte: 1px solid var(--border-strong); --sombra-flutua: 0 4px 16px -6px rgba(18,24,28,.18); /* ═══ MOVIMENTO ═══════════════════════════════════════════════════════════ */ --dur-toque: 120ms; --dur-padrao: 200ms; --dur-tela: 320ms; --dur-onda: 1400ms; --ease-entrada: cubic-bezier(.2, 0, 0, 1); --ease-saida: cubic-bezier(.4, 0, 1, 1); } /* ═══════════════════════════════════════════════════════════════════════════ TEMA GRAVAÇÃO · fundo grafite Existe para uma situação só: a tela de captura. O manual chama de "estado de atenção" — fundo grafite, e a leitura/plano em fundo claro. ═══════════════════════════════════════════════════════════════════════════ */ [data-tema="gravacao"], .tema-gravacao { --bg-canvas: var(--pg-grafite); --bg-surface: var(--pg-aco-900); --bg-accent-soft: var(--pg-aco-800); --border-default: var(--pg-aco-800); --border-strong: var(--pg-aco-700); --text-primary: var(--pg-branco); --text-secondary: #AEB9C2; --text-muted: var(--pg-cinza-medio); --action-default: var(--pg-azul); --action-pressed: var(--pg-azul-claro); --status-obtido: var(--pg-verde-claro); } /* ═══════════════════════════════════════════════════════════════════════════ A ONDA · o único elemento gráfico da marca Barras verticais de 1x de largura, espaçadas 1x, cantos retos, alturas variáveis. Uma única barra em Azul Sinal marca o momento que virou ação. Serve como assinatura de rodapé, divisor de seção ou faixa de capa — NUNCA como textura de fundo atrás de texto. ═══════════════════════════════════════════════════════════════════════════ */ .pg-onda { display: flex; align-items: center; gap: 3px; } .pg-onda i { display: block; width: 3px; border-radius: 0; background: var(--pg-cinza-linha); } .pg-onda i.acao { background: var(--pg-azul); } .pg-onda i.meta { background: var(--pg-verde); } .pg-onda--escura i { background: var(--pg-aco); }