/* ========================================================================== Óptica Luna — tokens de design Fonte da verdade única. Linkar de toda página do dashboard. Os valores NÃO são gerados: cada um é um hex que já estava em produção, promovido a token. Rampas geradas em OKLCH foram testadas e rejeitadas — deslocavam as cores da marca (#E24B4A viraria #fe6561). Onda 2 da consolidação de identidade. Ver "Identidade Óptica Luna" e "Onda 2 — patch.md". ========================================================================== */ :root { /* ---- Superfície ------------------------------------------------------- Papel creme, cartão branco, dois pesos de fio. */ --bg: #F7F4EF; --bg-sunk: #f2ece2; /* fundo rebaixado, base do .setor-card */ --card: #ffffff; --border: #e6ddd2; --border-strong: #d9cdbd; /* separador de seção, topo de total */ /* ---- Tinta ------------------------------------------------------------ Marrom, nunca preto. --text-tertiary substitui os cinzas frios importados (#999, #6b7280, #5f6368) — eram corpo estranho. */ --text: #2b2118; --text-secondary: #7c6f60; --text-tertiary: #a2988c; --text-on-dark: #ffffff; --text-on-dark-dim: rgba(255,255,255,0.55); /* ---- Ouro — o acento da marca ---------------------------------------- Sete passos, todos já presentes no produto. 500 é a cor da marca. */ --gold-100: #E8DCC1; /* borda de controle, mat claro */ --gold-200: #d4c4a0; /* fio superior do latão */ --gold-300: #c9b698; --gold-500: #B8A07A; /* A COR DA MARCA */ --gold-600: #a89068; /* hover / sombra do latão */ --gold-700: #8B7355; --gold-900: #6b573c; /* ouro como texto em fundo claro */ --gold-tint: rgba(184,160,122,0.08); /* realce de linha */ --gold-tint-strong: rgba(184,160,122,0.16); /* ---- Madeira — o chrome ---------------------------------------------- */ --wood-400: #4a3828; /* topo do gradiente da sidebar */ --wood-500: #3B2E1E; /* madeira base, títulos */ --wood-700: #362818; --wood-900: #2b2118; /* = --text */ /* ---- Semântico ------------------------------------------------------- Um verde e um vermelho, três pesos cada: fundo, base, tinta. Os segundos pares (#16a34a, #ef4444, vindos do Tailwind) são aposentados — cores frias num sistema quente. */ --green: #2E9B6F; --green-ink: #0f6e56; /* texto sobre --green-bg */ --green-bg: #e6f5ee; --green-border: #a7dfc4; --green-dark: #2d6b3f; /* sobre latão (ticker) */ --red: #E24B4A; --red-ink: #791f1f; --red-bg: #fcebeb; --red-border: #f0c9c9; --red-dark: #8b2020; /* sobre latão (ticker) */ --amber: #F2A735; --amber-ink: #92400e; --amber-bg: #fef3c7; --amber-bg-soft: #fffbea; /* linha de preview */ /* ---- Segmentos ------------------------------------------------------- Um valor por segmento, usado no gráfico E na aba. Tríade monocromática separada por luminosidade — libera vermelho/verde para significarem só negativo/positivo. (Onda 1, item 2) */ --seg-optica: #B8A07A; --seg-relojoaria: #4A3828; --seg-joalheria: #D4A853; /* ---- Série de dados -------------------------------------------------- 8 categorias de produto. Estavam num array de JS. */ --series-1: #A7845B; --series-2: #605BE5; --series-3: #1D9E75; --series-4: #E24B4A; --series-5: #F2A735; /* o âmbar de Lente de Contato */ --series-6: #7C6F60; --series-7: #4A90D9; --series-8: #D45DBF; /* ---- Formas de pagamento -------------------------------------------- */ --pay-credito: #E24B4A; --pay-debito: #605BE5; --pay-pix: #2E9B6F; --pay-dinheiro: #D4A853; --pay-crediario: #C97B3A; --pay-troca: #8B6F5A; --pay-ted: #5B8A9A; --pay-outros: #a2988c; /* era #999, agora neutro quente */ /* ---- Tipografia ------------------------------------------------------ Duas famílias, seis degraus. Raleway e Roboto eram invocadas sem nunca carregar — não voltam. (Onda 1, item 1) */ --font-ui: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Libre Baskerville", Georgia, serif; --fs-xs: 11px; /* rótulo do ticker, meta, badge, legenda */ --fs-sm: 12px; /* o cavalo de batalha: tabela, rótulo */ --fs-md: 13px; /* corpo de interface, botão, select, nav */ --fs-lg: 16px; /* título de painel, título de header */ --fs-xl: 20px; /* título de página */ --fs-2xl: 28px; /* número de KPI */ --lh-tight: 1.25; --lh-normal: 1.5; --lh-loose: 1.7; /* ---- Forma ----------------------------------------------------------- */ --radius-sm: 6px; /* controle: select, botão, badge */ --radius: 10px; /* superfície: card, painel, modal */ --radius-lg: 14px; /* pílula, avatar de destaque */ --radius-full: 999px; /* ---- Elevação -------------------------------------------------------- Três passos para as 26 sombras escritas à mão. */ --elev-1: 0 1px 3px rgba(43,33,24,.06); --elev-2: 0 1px 3px rgba(43,33,24,.04), 0 4px 12px rgba(43,33,24,.06); --elev-3: 0 2px 8px rgba(43,33,24,.10), 0 12px 32px rgba(43,33,24,.12); --elev-inset-top: inset 0 1px 0 rgba(255,255,255,.8); /* ---- Espaço ---------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --gutter: 28px; /* respiro lateral do main-header/views */ /* ---- Movimento ------------------------------------------------------- */ --dur-fast: .15s; --dur: .2s; --dur-slow: .35s; --ease: ease; /* ---- Específico do catálogo público --------------------------------- */ --whatsapp: #25d366; } /* -------------------------------------------------------------------------- Base compartilhada pelas três páginas. -------------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); font-size: var(--fs-md); background: var(--bg); color: var(--text); } h1, h2 { font-family: var(--font-display); color: var(--wood-500); } /* Foco de teclado — era o anel azul do navegador sobre a paleta creme. */ :focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; } ::selection { background: var(--gold-tint-strong); } a { color: var(--gold-900); } a:hover { color: var(--wood-500); }