/* EcomSmart DS · tokens (D5, 24/10/2026) Estrutura e medidas inspiradas no Polaris (Shopify): escala de 4 px, corpo de texto pequeno e firme, cartões de 12 px de raio, superfícies brancas sobre fundo cinza-claro, tons semânticos para selos e avisos. Marca da EcomSmart por cima: azul #0A5BF0, tinta #0B1033, Figtree. Sem código, sem ícones e sem a cara do Shopify Admin. Duas densidades: compacta (padrão, painéis de trabalho) e confortável. Elas trocam a altura das linhas, dos controles e o respiro dos cartões; não mexem em cor nem no tamanho da letra. No toque (pointer: coarse) todo alvo sobe para 44 px, e o botão principal para 48 px, em qualquer densidade. */ :root { /* ---------- cor: marca ---------- */ --ds-marca: #0A5BF0; --ds-marca-hover: #0849C4; --ds-marca-forte: #0A3FB0; /* texto azul sobre branco: 8,9:1 */ --ds-marca-suave: #EEF4FF; --ds-marca-suave-2: #D3E2FF; --ds-sobre-marca: #FFFFFF; /* ---------- cor: neutros ---------- */ --ds-fundo: #F1F3F6; /* fundo da aplicação (Polaris bg) */ --ds-superficie: #FFFFFF; /* cartões, tabelas, menu */ --ds-superficie-2: #F7F8FA; /* cabeçalho de tabela, linha em foco, campo desligado */ --ds-superficie-3: #EDF0F5; /* hover de item de menu e de linha */ --ds-tinta: #0B1033; /* títulos e números: 18,5:1 */ --ds-texto: #2E3850; /* corpo: 11,7:1 */ --ds-texto-2: #4A5670; /* apoio: 7,4:1 */ --ds-texto-3: #5F6B85; /* rótulos e legendas: 5,3:1 no branco, 4,8:1 no fundo (AA) */ --ds-borda: #DDE2EA; --ds-borda-forte: #C3CBD9; --ds-borda-campo: #8A94AB; /* contorno de campo: 3,1:1, o mínimo para componente */ --ds-foco: #0A5BF0; /* ---------- cor: tons (Polaris tones, cores da v4) ---------- */ --ds-ok: #146C3A; --ds-ok-fundo: #E7F6EC; --ds-ok-borda: #A6DDB8; --ds-ok-ico: #1F9D55; --ds-atencao: #7A4A00; --ds-atencao-fundo: #FFF4D6; --ds-atencao-borda: #F2D27A; --ds-atencao-ico: #D99A00; --ds-critico: #A3200F; --ds-critico-fundo: #FDECEA; --ds-critico-borda: #F5B7AE; --ds-critico-ico: #D92D20; --ds-info: #0A3FB0; --ds-info-fundo: #EEF4FF; --ds-info-borda: #B9D0FF; --ds-info-ico: #0A5BF0; --ds-neutro: #3D4760; --ds-neutro-fundo: #EDF0F5; --ds-neutro-borda: #D3D9E4; --ds-novo: #5B3FA8; --ds-novo-fundo: #F1ECFB; /* séries de gráfico (ordem fixa; nunca a cor sozinha carrega o sentido) */ --ds-serie-1: #0A5BF0; --ds-serie-2: #E4572E; --ds-serie-3: #1F9D55; --ds-serie-4: #7C5CD6; --ds-serie-5: #20738C; /* ---------- tipografia ---------- */ --ds-fonte: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ds-fonte-num: "Figtree", ui-sans-serif, system-ui, sans-serif; /* com font-variant-numeric: tabular-nums */ --ds-fs-11: 0.6875rem; /* 11 px: só selo pequeno e eixo de gráfico */ --ds-fs-12: 0.75rem; /* 12 px: rótulo, legenda, cabeçalho de tabela */ --ds-fs-13: 0.8125rem; /* 13 px: texto de tabela e de menu (Polaris body-md) */ --ds-fs-14: 0.875rem; /* 14 px: corpo, botão */ --ds-fs-16: 1rem; /* 16 px: título de cartão, corpo no celular */ --ds-fs-20: 1.25rem; /* 20 px: título da página, número de KPI */ --ds-fs-24: 1.5rem; /* 24 px: número em destaque */ --ds-fs-30: 1.875rem; /* 30 px: só o número principal de um dashboard */ --ds-lh-justa: 1.2; --ds-lh: 1.43; /* 20 px em 14 px */ --ds-peso-normal: 450; --ds-peso-medio: 550; --ds-peso-forte: 650; /* Polaris usa 650 nos títulos */ --ds-peso-pesado: 750; /* ---------- espaço: múltiplos de 4 px (Polaris space-*) ---------- */ --ds-0: 0; --ds-050: 2px; --ds-100: 4px; --ds-150: 6px; --ds-200: 8px; --ds-300: 12px; --ds-400: 16px; --ds-500: 20px; --ds-600: 24px; --ds-800: 32px; --ds-1000: 40px; --ds-1200: 48px; --ds-1600: 64px; /* ---------- raio, sombra, linha ---------- */ --ds-raio-1: 4px; --ds-raio-2: 8px; --ds-raio-3: 12px; --ds-raio-4: 16px; --ds-raio-pilula: 999px; --ds-sombra-cartao: 0 1px 0 rgb(11 16 51 / .05), 0 0 0 1px rgb(11 16 51 / .07); --ds-sombra-botao: 0 1px 0 rgb(11 16 51 / .08), inset 0 -1px 0 rgb(11 16 51 / .10); --ds-sombra-flutuante: 0 12px 32px -8px rgb(11 16 51 / .28), 0 0 0 1px rgb(11 16 51 / .08); --ds-sombra-modal: 0 24px 64px -16px rgb(11 16 51 / .40), 0 0 0 1px rgb(11 16 51 / .08); --ds-anel-foco: 0 0 0 2px var(--ds-superficie), 0 0 0 4px var(--ds-foco); /* ---------- estrutura da aplicação ---------- */ --ds-menu-larg: 232px; /* menu lateral no computador */ --ds-topo-alt: 52px; /* barra do topo */ --ds-barra-baixo: 64px; /* barra de 4 ou 5 destinos no celular */ --ds-pagina-max: 1600px; /* dashboard usa a tela toda até aqui */ --ds-pagina-estreita: 960px;/* formulários e configurações */ /* ---------- movimento ---------- */ --ds-dur-1: 120ms; --ds-dur-2: 200ms; --ds-curva: cubic-bezier(.2, .7, .2, 1); /* ---------- densidade: compacta (padrão) ---------- */ --ds-controle: 32px; /* botão, campo, aba, filtro */ --ds-controle-p: 28px; /* botão pequeno, chip */ --ds-linha-tabela: 40px; --ds-item-menu: 32px; --ds-cartao-pad: 12px 16px; --ds-grade-gap: 12px; /* entre cartões */ --ds-secao-gap: 16px; /* entre blocos da página */ --ds-pagina-pad: 16px 20px 32px; --ds-cel-pad-x: 8px 12px; /* célula de tabela */ } [data-densidade="confortavel"] { --ds-controle: 36px; --ds-controle-p: 32px; --ds-linha-tabela: 48px; --ds-item-menu: 36px; --ds-cartao-pad: 16px 20px; --ds-grade-gap: 16px; --ds-secao-gap: 20px; --ds-pagina-pad: 20px 24px 40px; --ds-cel-pad-x: 12px 16px; } /* Toque: alvo de 44 px (WCAG 2.5.5 / Apple HIG) em qualquer densidade. A letra do corpo sobe para 15 px. */ @media (pointer: coarse) { :root, [data-densidade] { --ds-controle: 44px; --ds-controle-p: 40px; --ds-item-menu: 44px; --ds-linha-tabela: 52px; } } @media (max-width: 767px) { :root, [data-densidade] { --ds-controle: 44px; /* celular: alvo de toque mesmo sem pointer: coarse (ex.: navegador da área de trabalho estreito) */ --ds-controle-p: 40px; --ds-item-menu: 44px; --ds-linha-tabela: 52px; --ds-pagina-pad: 12px 12px calc(var(--ds-barra-baixo) + 24px + env(safe-area-inset-bottom)); --ds-grade-gap: 8px; --ds-secao-gap: 12px; --ds-cartao-pad: 12px; } } @media (prefers-reduced-motion: reduce) { :root { --ds-dur-1: 0ms; --ds-dur-2: 0ms; } }