/* =============================================================
SANTRACK · DESIGN TOKENS v1
Cole este arquivo como /public/css/tokens.css e importe-o ANTES
de qualquer outro CSS no seu HTML:
Os tokens vivem em :root como variáveis CSS — podem ser sobrescritos
por seletor (ex.: .theme-dark) para temas alternativos no futuro.
============================================================= */
:root {
/* ---------------- BRAND ----------------
A cor primária do Zapcode/SANTRACK. Use Brand 500 em botões
primários, links e elementos ativos. Brand 600 é o estado
pressed/hover do botão. Brand 50/100 são tints para fundo de
componentes (linhas selecionadas, avatares, etc.).
*/
--brand-500: #FF6717;
--brand-600: #E55400;
--brand-400: #FF8A4D;
--brand-100: #FFE6D4;
--brand-50: #FFF4EC;
/* ---------------- NEUTRALS (slate frio) ----------------
Substituem o azul-ardósia (#2c3e50) e o cinza-template
(#f5f5f5). N-50 é o background padrão da aplicação,
N-900 é a sidebar escura, N-950 é o texto principal.
*/
--n-0: #FFFFFF;
--n-50: #F7F8FA;
--n-100: #F1F3F6;
--n-200: #E4E7EC;
--n-300: #CDD2DB;
--n-400: #9AA3B2;
--n-500: #6B7585;
--n-700: #3A4452;
--n-800: #252E3A; /* mantido — é o fundo do login legado */
--n-900: #1A2230;
--n-950: #0F1419;
/* ---------------- SEMANTIC ----------------
Cores com significado fixo. Use-as APENAS para o que indicam.
Cada cor tem um pareado de fundo (-bg) para badges/pílulas.
*/
--success: #16A34A;
--success-bg: #DCFCE7;
--warning: #F59E0B;
--warning-bg: #FEF3C7;
--danger: #DC2626;
--danger-bg: #FEE2E2;
--info: #2563EB;
--info-bg: #DBEAFE;
--whatsapp: #25D366; /* canal-específico, não usar como semântico */
/* ---------------- TYPOGRAPHY ----------------
Inter para UI (lê bem em telas, tem números tabulares).
JetBrains Mono para valores monetários, IDs e timestamps.
Carregar via Google Fonts no do dashboard.html:
*/
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ---------------- RADII ----------------
Três tamanhos, suficiente para todo o sistema.
sm — botões, inputs, badges, pílulas de status
md — colunas kanban, painéis pequenos
lg — cards principais, modais
pill — pílulas full-rounded (status, contadores)
*/
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-pill: 999px;
/* ---------------- SPACING SCALE ----------------
Base 4px. Use estas variáveis em padding/margin/gap.
Evita "padding: 13px" inventado — todo gap se encaixa na escala.
*/
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
/* ---------------- ELEVATION ----------------
Três níveis. shadow-sm é o default de qualquer card/painel.
md é para dropdowns e popovers. lg para modais e dialogs.
Inclui um anel de 1px para destacar o card da página sem borda.
*/
--shadow-sm: 0 1px 2px rgba(15,20,25,.06), 0 0 0 1px rgba(15,20,25,.04);
--shadow-md: 0 4px 12px rgba(15,20,25,.08), 0 0 0 1px rgba(15,20,25,.04);
--shadow-lg: 0 12px 32px rgba(15,20,25,.12), 0 0 0 1px rgba(15,20,25,.04);
/* ---------------- MOTION ----------------
Easing padrão para transições de UI. 150-200ms para hover/focus,
250-350ms para mudanças de layout.
*/
--ease: cubic-bezier(.4, 0, .2, 1);
/* ---------------- Z-INDEX SCALE ----------------
Camadas previsíveis. dropdown < sticky < modal-backdrop < modal < toast.
*/
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 900;
--z-modal: 1000;
--z-toast: 1100;
}
/* ---------------- ALIASES SEMÂNTICOS ----------------
Atalhos para uso comum. Sempre prefira estes em código de aplicação
— assim, mudar um tema é mais simples no futuro.
*/
:root {
--bg-page: var(--n-50);
--bg-surface: var(--n-0);
--bg-muted: var(--n-100);
--text-strong: var(--n-950);
--text-base: var(--n-900);
--text-muted: var(--n-500);
--text-faint: var(--n-400);
--border-base: var(--n-200);
--border-soft: var(--n-100);
--accent: var(--brand-500);
--accent-hover: var(--brand-600);
}
/* ---------------- BASE RESET (opcional, conservador) ----------------
Aplique APENAS se for ok com seus formulários atuais.
Pode comentar este bloco se quiser usar só as variáveis.
*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--text-base);
background: var(--bg-page);
}