/* ========================================================================= Favom — tokens do portal. FONTE ÚNICA. Vive separado de style.css para que as telas fora da SPA (login, convite, estoque público, imagens IA) usem os mesmos tokens sem carregar 16 mil linhas de CSS. Antes disso o login.html reimplementava a paleta à mão — era a única tela inteiramente fora do sistema, e a primeira que todo usuário vê. Carregue SEMPRE antes de style.css. Cor nova entra aqui, nunca numa tela. Ver docs/design/FAVOM_UI_LIBRARY.md. ========================================================================= */ :root { /* === TOKENS DE MARCA - espelhar no site Astro === */ /* Marca · papel: AÇÃO */ --color-brand: #e8a000; --color-brand-hover: #c98800; --color-brand-subtle: #fff3d0; /* Componentes do âmbar, para brilho e halo com alfa variável. Mantém o rgba() amarrado à marca: se o âmbar mudar, o brilho acompanha. */ --color-brand-rgb: 232, 160, 0; /* Texto · papel: SUPERFÍCIE */ --color-text-main: #1c1a17; --color-text-sub: #6b6560; --color-text-muted: #a8a097; --color-text-muted-readable: #746e68; /* 5,03:1 branco · 4,54:1 areia */ --color-text-faint: #d6cfc5; /* Superfícies · papel: SUPERFÍCIE */ --color-bg: #f5f3ef; --color-bg-soft: #faf9f7; --color-surface: #ffffff; --color-surface-2: #faf9f7; --color-surface-3: #f0ece5; --color-overlay: rgba(0, 0, 0, 0.42); /* Bordas (form inputs only) · papel: SUPERFÍCIE */ --color-border: #e8e3db; --color-border-input: #e2ddd6; /* Semânticas · papel: SEMÂNTICA */ --color-success: #16a34a; --color-success-dark: #047857; --color-success-bg: #dcfce7; --color-success-surface: #f0fdf4; --color-success-border: #86efac; --color-error: #dc2626; /* Componentes do vermelho, para halo de foco com alfa. Mesmo motivo do --color-brand-rgb: mantem o rgba() amarrado ao token. */ --color-error-rgb: 220, 38, 38; --color-error-bg: #fee2e2; --color-warning: #b45309; --color-warning-bg: #fffbeb; --color-warning-dark: #92400e; /* ADMIN VISUAL IDENTITY · papel: APOIO */ --color-admin-ink: #15130f; --color-admin-card: #fffdf8; --color-admin-card-warm: #fff7e8; --color-admin-card-green: #effdf5; --color-admin-card-blue: #eef6ff; --color-admin-card-orange: #fff3e4; --color-admin-line: rgba(28, 26, 23, 0.08); --color-admin-soft-shadow: 0 10px 30px rgba(41, 31, 18, 0.07); --color-admin-deep-shadow: 0 18px 45px rgba(41, 31, 18, 0.11); --color-admin-blue: #2563eb; --color-admin-orange: #f97316; --color-admin-green: #16a34a; --admin-radius-xl: 24px; --admin-radius-lg: 18px; --admin-radius-md: 14px; /* === APOIO ANALITICO === Uma cor fria, um matiz so. Papel: o que se LE e se COMPARA — dado, grafico, consulta. O ambar continua significando "aja aqui", e volta a significar so isso. Escolhida pelo Lucas em 2026-07-28 (marinho, 219deg, 33% de saturacao, 11,6:1 sobre a areia). Ver o contrato da Favom UI Library. */ --color-apoio: #25324A; --color-apoio-forte: #1a2435; --color-apoio-suave: #eef1f6; /* === RAMPA QUENTE === Texto e superficie escura na familia da marca, em vez do cinza generico de antes (--color-text-sub tem 5% de saturacao; estes tem 9-50%). E o que faz a tela parecer desenhada em vez de montada. Paleta do Lucas, 2026-07-28. */ --color-quente-1: #745C27; /* 50% satur — 5,74:1 texto de apoio */ --color-quente-2: #4A3E25; /* 33% satur — 9,44:1 texto secundario */ --color-quente-3: #332E22; /* 20% satur — 12,19:1 texto principal */ --color-quente-4: #33302B; /* 9% satur — 11,85:1 superficie escura */ /* === TINGIMENTO === · papel: SUPERFÍCIE Base legada de cartao e circulo tingidos — o tom do assunto em opacidade baixa. Sem estes tokens cada tela escreveria o seu rgba() na mao, que e como nasceram as 4 familias de botao. Os componentes -rgb existem para o alfa ser variavel sem soltar o valor do token: se o marinho mudar, o tingimento acompanha. E `rgba(var(--x), .08)` nao conta na catraca de rgba literal (ela exige digito depois do parenteses), entao a tecnica certa nao gasta orcamento da trava. Contrastes medidos em 2026-07-28, nao estimados: texto principal sobre tingido 8% ..... 13,6 a 16,3:1 texto de apoio sobre tingido 8% ..... 4,50 a 5,40:1 (piso: apoio/areia) Por isso 8% e o teto do tingimento de superficie. A 12% o texto de apoio reprova. */ --color-apoio-rgb: 37, 50, 74; --color-success-rgb: 22, 163, 74; --color-warning-rgb: 180, 83, 9; /* Fundo de celula e de cartao. */ --tint-acao: rgba(var(--color-brand-rgb), 0.08); --tint-apoio: rgba(var(--color-apoio-rgb), 0.08); --tint-sucesso: rgba(var(--color-success-rgb), 0.08); --tint-aviso: rgba(var(--color-warning-rgb), 0.08); --tint-erro: rgba(var(--color-error-rgb), 0.08); /* Fundo de selo, pilula e ancora — area pequena, aceita mais tom. */ --tint-forte-acao: rgba(var(--color-brand-rgb), 0.12); --tint-forte-apoio: rgba(var(--color-apoio-rgb), 0.12); --tint-forte-sucesso: rgba(var(--color-success-rgb), 0.12); --tint-forte-aviso: rgba(var(--color-warning-rgb), 0.12); --tint-forte-erro: rgba(var(--color-error-rgb), 0.12); /* Celula em cor FORTE — nivel 2 legado. Aqui o tom deixa de ser fundo e vira o assunto da celula. 20% e o teto: a partir dai o titulo ainda passa, mas o desenho comeca a competir com o cartao escuro, que e a ancora unica. Medido em 2026-07-29, com o texto de apoio JA no tom (ver abaixo): titulo (--color-text-main) ...... 11,9 a 14,8:1 apoio (--tom-texto-*) .......... 4,8 a 8,8:1 Com o cinza --color-text-sub o nivel forte reprova em todos os tons (4,20:1 no vermelho a 20%). Por isso a regra da celula forte nao e so o fundo: o texto de apoio TROCA de cor junto. */ --cor-forte-acao: rgba(var(--color-brand-rgb), 0.20); --cor-forte-apoio: rgba(var(--color-apoio-rgb), 0.20); --cor-forte-sucesso: rgba(var(--color-success-rgb), 0.20); --cor-forte-aviso: rgba(var(--color-warning-rgb), 0.20); --cor-forte-erro: rgba(var(--color-error-rgb), 0.20); /* Texto e icone DENTRO do tingido. Nao use o tom cheio: medido, o ambar sobre o proprio tingimento da 2,02:1 e reprova. Estas variantes escuras passam. */ --tom-texto-acao: #8a5f00; /* 5,14:1 sobre --tint-forte-acao */ --tom-texto-apoio: #25324A; /* 10,33:1 */ /* Escurecido de #047857 em 2026-07-29: no nivel forte o verde antigo dava 4,39:1 e reprovava. Este passa nos dois niveis — 5,71:1 no tingido, 5,23:1 no forte — e e a mesma familia de verde. */ --tom-texto-sucesso: #046b4e; /* 5,71:1 */ --tom-texto-aviso: #92400e; /* 6,02:1 */ --tom-texto-erro: #991b1b; /* 6,90:1 */ /* Celula da MARCA — o ambar cheio, nivel 3. Existe so em ambar: e a unica cor da paleta que aguenta 100% com texto escuro em cima (7,82:1). Uma por tela, como o cartao escuro — as duas juntas sao as ancoras do olho. O apoio aqui NAO pode ser o cinza: --color-text-sub sobre ambar cheio da 2,59:1. Usa-se o quente-3, medido em 6,08:1. */ --color-sobre-marca: #1c1a17; /* 7,82:1 */ --color-sobre-marca-fraco: #332E22; /* 6,08:1 */ /* Terceiro degrau, para o que dentro do ambar cheio resolve --color-text-muted. Sem ele o rebind de escopo teria de mapear "apagado" para o mesmo valor de "fraco", e a hierarquia de tres niveis viraria dois. Medido sobre #e8a000: 4,90:1. */ --color-sobre-marca-apagado: rgba(var(--color-sobre-marca-rgb), 0.76); /* Componente, pelo mesmo motivo dos tingimentos: alfa variavel sem soltar o valor do token, e sem gastar orcamento da catraca de rgba literal. Serve para realce DENTRO do ambar cheio — rotulo, trilho de coluna, divisoria. */ --color-sobre-marca-rgb: 28, 26, 23; /* Cartao escuro — a ancora do olho da secao 5, um por tela. O marinho e o papel de APOIO, que ate aqui quase nao tinha expressao visual. */ --color-sobre-escuro: #ffffff; /* 12,85:1 */ --color-sobre-escuro-fraco: rgba(255, 255, 255, 0.78); /* 8,47:1 */ /* Terceiro degrau, pelo mesmo motivo do ambar: e o que --color-text-muted vira dentro do cartao escuro. Medido: 6,26:1. */ --color-sobre-escuro-apagado: rgba(255, 255, 255, 0.64); /* 6,26:1 */ /* Componente do branco, pelo mesmo motivo dos tingimentos: alfa variável sem soltar o valor, e sem gastar orçamento da catraca de rgba literal. Serve para realce sobre o cartão escuro — hover, divisória, faixa. */ --color-sobre-escuro-rgb: 255, 255, 255; /* Empresas · papel: IDENTIDADE */ --color-decor: #7a6a55; /* Tipografia */ --font-base: 'Inter', system-ui, sans-serif; /* Escala tipográfica — nome semântico, não numérico. Existiam 25 tamanhos de fonte diferentes neste arquivo (15px 40x, 17px 19x, 19px, 21px, 23px, 25px) porque não havia NOME para "um pouco maior que o corpo". Quando o único jeito de pedir um tamanho é escrever o número, cada tela escolhe o seu e nenhuma duas telas combinam. Código novo usa estes nomes. Código velho migra quando a tela for mexida. */ --fs-micro: 11px; /* selo, rótulo de badge, legenda de tabela densa */ --fs-xs: 12px; /* metadados, referência de produto, apoio */ --fs-sm: 13px; /* texto secundário, item de lista densa */ --fs-base: 14px; /* corpo padrão do portal */ --fs-md: 16px; /* título de card, entrada de formulário */ --fs-lg: 18px; /* preço em destaque, título de seção */ --fs-xl: 22px; /* título de tela */ --fs-2xl: 28px; /* número que é a resposta da tela */ /* Os dois abaixo entraram em 2026-07-28 para completar a escala legada. A escala parava em 28px e as seis referências escolhidas pelo Lucas lideram todas com numeral de 40px ou mais — o número grande é o que faz um cartão de dado parecer desenhado em vez de preenchido. Sem nome para ele, cada tela ia escolher o seu, que é exatamente o problema que esta escala resolveu. */ --fs-3xl: 40px; /* número que lidera um cartão de bento */ --fs-4xl: 56px; /* número único que lidera a tela inteira */ --lh-tight: 1.2; /* números e títulos curtos */ --lh-base: 1.45; /* corpo */ --lh-loose: 1.6; /* texto longo, ajuda, vazio explicativo */ /* Escala de espaço — base 4, seis passos. Curta de propósito: com 24 valores disponíveis (todo inteiro de 1 a 24px estava em uso) ninguém decide, cada um estima no olho, e o ritmo da tela muda de bloco para bloco. Seis passos forçam a escolha. */ --space-1: 4px; /* colar: ícone e o rótulo dele */ --space-2: 8px; /* itens da mesma coisa */ --space-3: 12px; /* interior de controle, linha de lista */ --space-4: 16px; /* interior de card, entre campos */ --space-5: 24px; /* entre blocos de assunto diferente */ --space-6: 32px; /* entre seções da tela */ /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* superfície solta sobre canvas vazio: login, modal grande */ --radius-full: 9999px; /* Sombras — sistema Soft Enterprise */ --shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.04); --shadow-card: 0px 8px 30px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.03); --shadow-card-hover: 0px 16px 48px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.04); --shadow-panel: 0px 4px 20px rgba(0, 0, 0, 0.06); /* Elevação de superfície que flutua sozinha na tela, sem nada em volta que dê profundidade. A escala pulava de panel (blur 20) para card-hover, e não havia degrau para esse caso. */ --shadow-elevated: 0px 12px 40px rgba(0, 0, 0, 0.06); --shadow-focus: 0 0 0 3px rgba(232, 160, 0, 0.15); /* Transições / Motion — Soft Enterprise */ --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-spring: cubic-bezier(0.34, 1.1, 0.64, 1); --motion-duration-fast: 0.35s; --motion-duration-base: 0.72s; --motion-duration-slow: 0.95s; --motion-duration-panel: 0.58s; --transition-base: var(--motion-duration-fast) var(--motion-ease-out); --transition-slide: var(--motion-duration-panel) var(--motion-ease-out); /* Ícones */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* Navegação · papel: SUPERFÍCIE */ --color-nav-bg: #ffffff; --color-nav-text: var(--color-text-sub); --color-nav-active-bg: var(--color-brand-subtle); --color-nav-active-text: var(--color-brand); --nav-width-desktop: 220px; --topbar-height-mobile: 52px; --bottomnav-height: 58px; /* Badges por Andar (Bloco N) · papel: SEMÂNTICA */ /* Curva ABC (Bloco L) · papel: SEMÂNTICA */ --color-badge-b: #2563eb; /* Oportunidades (home widget C) · papel: SEMÂNTICA */ --color-oport-bg: #fffbeb; --color-oport-border: #fde68a; --color-oport-accent: #d97706; /* Vendedor — barra de seleção de cliente · papel: SUPERFÍCIE */ --color-vendedor-bar-bg: #fff8f0; --color-vendedor-accent: #b3541e; --color-vendedor-border: #e8c9a0; --color-vendedor-focus: #f08c00; --color-vendedor-focus-ring: rgba(240, 140, 0, 0.12); --color-vendedor-accent-soft: rgba(179, 84, 30, 0.08); --color-vendedor-accent-soft-hover: rgba(179, 84, 30, 0.14); /* Empresas — variantes de badge · papel: IDENTIDADE */ --color-fvm-dark: #b47800; /* Kanban / expedição · papel: SEMÂNTICA */ --color-kanban-revisao: #3b82f6; --color-kanban-separacao: #f59e0b; --color-kanban-conferencia: #a855f7; --color-kanban-retidos: #ef4444; --color-kanban-retidos-dark: #b91c1c; --color-kanban-prontos: #22c55e; --color-kanban-scroll-thumb: #d6d0c8; --color-kanban-empty: #c8beb0; --color-exp-urgente-bg: #fffafa; /* Texto sobre fundos escuros / marca · papel: SUPERFÍCIE */ --color-on-brand: #ffffff; --color-on-ink: #ffffff; /* Pagamento (PIX / boleto / gateway) · papel: APOIO */ --color-pay-blue: #1a56b5; --color-pay-blue-bright: #1d4ed8; /* Semânticas — variantes de texto · papel: SEMÂNTICA */ --color-success-text: #1f8a3b; --color-success-text-dark: #15803d; --color-success-text-deep: #166534; --color-success-emerald: #047857; --color-success-forest: #065f46; --color-error-text: #b42318; --color-error-text-dark: #991b1b; --color-error-text-deep: #7f1d1d; --color-error-strike: #c0392b; --color-error-hover: #b91c1c; --color-warn-text: #a15c00; --color-success-hover: #15803d; /* Bordas / fundos auxiliares · papel: SUPERFÍCIE */ --color-border-soft: #ebe6de; --color-border-warm: #eee8df; --color-border-panel: #e8e4de; --color-border-muted: #f3f0ea; --color-border-control: #d6d0c8; --color-error-border: #fecaca; --color-success-border-soft: #bbf7d0; /* Brand / utilitários · papel: AÇÃO */ --color-brand-dark: #b5790a; --color-brand-warm-bg: #fff8ee; --color-surface-warm: #faf8f5; --color-surface-panel: #f0ede8; --color-text-strikethrough: #c0b8ac; --color-hint-success: #86b89a; --color-notice-bg: #fef3c7; /* Admin — tons de métrica e gradientes · papel: APOIO */ --color-admin-danger-bg: #fff5f5; --color-admin-warn-bg: #fff8eb; --color-admin-ok-bg: #f0fbf5; --color-admin-danger-surface: #fff1f2; --color-admin-grad-amber: #fbbf24; --color-admin-grad-green: #86efac; --color-admin-grad-blue: #60a5fa; --color-admin-grad-violet: #c4b5fd; --color-admin-grad-mint: #bbf7d0; --color-admin-grad-sky: #bfdbfe; /* Badges expedição (status legado) · papel: SEMÂNTICA */ --color-badge-revisao-bg: #eff6ff; --color-badge-conferencia-bg: #faf5ff; --color-badge-conferencia-text: #7e22ce; --color-badge-neutral-bg: #f3f4f6; --color-badge-neutral-text: #6b7280; --color-badge-faturado-bg: #ecfdf5; --color-neutral-bg: #f5f5f5; /* Hub do Produto / Mercado Livre · papel: A CLASSIFICAR */ --color-ink-slate: #0f172a; --color-ink-night: #020617; --color-hub-accent-brown: #7a4a27; --color-hub-border-tan: #e8e0d4; --color-hub-border-tan-2: #e0d6c8; --color-hub-border-tan-3: #d4cbbf; --color-hub-border-tan-4: #d9d0c4; --color-hub-border-tan-5: #e8e2d8; --color-hub-border-sep: #ece5da; --color-hub-canvas: #faf7f2; --color-hub-canvas-alt: #f3efe8; --color-hub-section-bg: #f7fbf5; --color-hub-warm-bg: #fff7ed; --color-hub-warm-text: #c2410c; --color-hub-warm-text-dark: #9a3412; --color-hub-cream: #fffaf3; --color-hub-tan-text: #5c5348; --color-hub-gold-border: #c9a66b; --color-hub-gold-border-2: #f0d9c4; --color-ml-yellow: #ffd100; --color-ml-yellow-text: #333333; --color-muted-slate: #f8fafc; --color-border-slate: #e2e8f0; --color-surface-slate: #f1f5f9; --color-gray-300: #d1d5db; --color-ads-active-bg: #d1fae5; --color-ads-active-border: #6ee7b7; --color-ads-paused-border: #fcd34d; --color-ads-error-border: #fca5a5; /* Aliases legados ainda usados por trechos antigos do app */ --border: var(--color-border); --color-amber: var(--color-brand); --color-text: var(--color-text-main); --danger: var(--color-error); --text-muted: var(--color-text-sub); /* Favom UI Library v1. Aditivo: os valores legados acima ficam intactos. */ --color-info: #356ae6; --color-neutral: var(--color-text-sub); /* Escala espacial completa: 4, 8, 12, 16, 24, 32, 48 e 64px. */ --space-7: 48px; --space-8: 64px; /* Bordas por funcao. */ --border-width-default: 1px; --border-default: var(--border-width-default) solid var(--color-border); --border-strong: var(--border-width-default) solid var(--color-border-control); --tracking-label: 0.06em; /* Papeis tipograficos da biblioteca. A escala legivel e candidata: os papeis ainda nao afetam telas de produto fora do UI Lab. */ --type-display-page: 36px; --type-title-page: 30px; --type-title-section: 22px; --type-title-card: 18px; --type-body-primary: 16px; --type-body-secondary: 15px; --type-label: 13px; --type-metadata: 13px; --type-data-large: 32px; --type-data-compact: 20px; --type-button-label: 15px; /* Radius por funcao, dentro dos intervalos normativos. */ --radius-control: 8px; --radius-card-compact: 8px; --radius-card-standard: 12px; --radius-card-featured: 16px; --radius-pill: var(--radius-full); /* Profundidade 0 canvas, 1 work surface, 2 componente, 3 overlay. */ --depth-0-shadow: none; --depth-1-shadow: none; --depth-2-shadow: var(--shadow-sm); --depth-3-shadow: var(--shadow-elevated); }