/* ============================================================ IP Soluções - Design System unificado · Tokens canônicos Fonte ÚNICA de verdade visual de apps/sites internos da IP. Tema escuro único · paleta de fogo brasileira. Direção (decisão do Italo, ADR-007): • Brandbook OFICIAL em tudo (cores de marca, neutros, tipografia). • EXCEÇÃO pragmática: cores de STATUS adotam o kit mais legível do app financeiro (melhor leitura em tema escuro). Origem dos valores oficiais: operacao/projetos/ip-solucoes/contexto/marca/design.md Origem da escala madura (spacing/raios/sombras) e dos status: apps/financeiro/src/styles/colors_and_type.css ============================================================ */ :root { /* ============================================================ MARCA - paleta de fogo (oficial - design.md) ============================================================ */ --brand: #E85002; /* laranja IP · brand.action - CTA, link, ação primária (oficial - design.md) */ --brand-deep: #C10801; /* vinho · brand.deepRed - hover/pressed do CTA (oficial - design.md) */ --brand-amber: #F16001; /* âmbar · brand.amber - hover do CTA (handoff: --action-hover = orange-400) */ --brand-sand: #D9C3AB; /* areia · brand.sand - acento humano, badges "IA"/"automatizado" (oficial - design.md) */ --brand-accent: #FB7B2C; /* laranja claro · handoff --brand-orange-300 - ACENTO de texto/ícone (eyebrow, rail ativo, chips, links de marca); os protótipos usam este, não o âmbar */ --brand-active: #CF4701; /* laranja escuro · handoff --brand-orange-600 / --action-active - pressed do CTA */ /* Derivados do laranja para preenchimentos/bordas suaves (handoff: soft .14 / border .40) */ --brand-tint: rgba(232, 80, 2, 0.14); /* fill sutil (handoff --brand-orange-soft) */ --brand-tint-2: rgba(232, 80, 2, 0.18); /* fill em hover */ --brand-border: rgba(232, 80, 2, 0.40); /* borda de marca */ /* ============================================================ NEUTROS - escala dark oficial (oficial - design.md) Canvas → superfícies → bordas → textos. ============================================================ */ --bg-app: #0E0E0E; /* canvas dark padrão · neutral.900 (oficial - design.md) */ --bg-raised: #141414; /* meio-termo app/surface: rail, card do login e painel de modal (handoff IP Ads; mesmo token da copia do IP Jobs) */ --bg-surface: #1F1F1F; /* cards & superfície elevada · neutral.800 (oficial - design.md) */ --bg-surface-2: #242424; /* nested/hover - derivado da escala neutral */ --border: #333333; /* hairline/borda · neutral.700 (oficial - design.md) */ --border-guia: #2E2E2E; /* divisor do rail e linhas-guia da árvore (handoff --neutral-200) */ --fg-1: #FAFAFA; /* texto primário · neutral.50 (oficial - design.md) */ --fg-2: #A7A7A7; /* texto secundário/muted · neutral.400 (oficial - design.md) */ --fg-3: #646464; /* texto subtle/captions · neutral.500 (oficial - design.md) */ --fg-on-brand: #FFFFFF; /* ============================================================ STATUS - (exceção: legibilidade - kit financeiro) Escolha pragmática: melhor contraste/leitura em tema escuro. ============================================================ */ --positive: #34D399; /* receita/saldo+ (exceção: legibilidade - kit financeiro) */ --positive-tint: rgba(52, 211, 153, 0.14); /* handoff --status-positive-soft */ --positive-border: rgba(52, 211, 153, 0.32); --warning: #FBBF24; /* aviso (exceção: legibilidade - kit financeiro) */ --warning-tint: rgba(251, 191, 36, 0.14); /* handoff --status-warning-soft */ --warning-border: rgba(251, 191, 36, 0.34); --negative: #FF6B6B; /* despesa/erro/vencida (exceção: legibilidade - kit financeiro) */ --negative-tint: rgba(255, 107, 107, 0.14); /* handoff --status-negative-soft */ --negative-border: rgba(255, 107, 107, 0.34); --info: #5B9BFF; /* neutro/aberta (exceção: legibilidade - kit financeiro) */ --info-tint: rgba(91, 155, 255, 0.14); /* handoff --status-info-soft */ --info-border: rgba(91, 155, 255, 0.34); /* ============================================================ TIPOGRAFIA - fontes oficiais (oficial - design.md) Space Grotesk (títulos) · Inter (corpo) · JetBrains Mono (números) ============================================================ */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* títulos/hero/CTAs (oficial - design.md) */ --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* corpo/UI (oficial - design.md) */ --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* números/métricas/eyebrow (oficial - design.md) */ /* ============================================================ SPACING (base 4px) - escala madura portada do financeiro ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ============================================================ RAIOS - escala portada do financeiro ============================================================ */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ============================================================ SOMBRAS / ELEVAÇÃO - portadas do financeiro (calibradas p/ dark) ============================================================ */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.45); /* handoff --shadow-md */ --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.6); /* handoff --shadow-pop (modal) */ --overlay-scrim: rgba(0, 0, 0, 0.6); /* backdrop de (handoff: rgba(0,0,0,.6) + blur 3px) */ --ring-brand: 0 0 0 3px rgba(232, 80, 2, 0.45); /* anel de foco de marca (handoff --focus-ring .45; com .28 sumia no fundo) */ --ring-focus: 0 0 0 3px rgba(91, 155, 255, 0.4); /* anel de foco neutro/info */ /* ============================================================ PREVIEW META (bloco LOCAL do IP Ads - tela Vestir o anuncio) Cores da UI CLARA do feed do Facebook (handoff: IP Ads Vestir anuncio.dc.html), nao da marca: o preview imita a Meta. ATENCAO ao recopiar o tokens.css do design-system: preservar este bloco (ele nao existe la; regra "nenhuma cor nasce fora do tokens.css" e o motivo de ele morar aqui). ============================================================ */ --pv-card: #FFFFFF; /* cartao do feed */ --pv-texto: #1C1E21; /* texto principal do feed */ --pv-muted: #65676B; /* metadados ('Patrocinado') */ --pv-barra: #F0F2F5; /* barra de link cinza */ --pv-botao: #E4E6EB; /* botao de CTA do feed */ --pv-midia-1: #E7E2DB; /* gradiente placeholder da midia */ --pv-midia-2: #D3CCC1; --pv-midia-3: #C9C1B5; /* ponta do gradiente do Stories */ --pv-midia-icone: #9A9184; /* icone play do placeholder */ --pv-scrim: rgba(0, 0, 0, 0.55); /* gradiente do rodape do Stories */ --pv-branco-95: rgba(255, 255, 255, 0.95); /* pill de CTA do Stories */ --pv-branco-85: rgba(255, 255, 255, 0.85); /* barra de progresso ativa */ --pv-branco-40: rgba(255, 255, 255, 0.4); /* barra de progresso vazia */ --pv-sombra: 0 8px 24px rgba(0, 0, 0, 0.4); /* sombra do cartao */ --pv-sombra-texto: 0 1px 3px rgba(0, 0, 0, 0.5); /* texto sobre midia */ }