/* ═══════════════════════════════════════════════ tokens.css — Design Tokens do CRM Saúde Variáveis, reset, tipografia, seleção ═══════════════════════════════════════════════ */ @import url('/assets/css/inter-fonts.css?v=1'); /* Public Sans — fonte do tema "Sneat". O browser SÓ baixa os arquivos da fonte quando o tema está ativo (font-family em uso); custo zero no Clássico. CSP já permite fonts.googleapis.com / fonts.gstatic.com. */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, monospace; /* Backgrounds */ --bg-white: #FFFFFF; --bg-light: #F8FAFC; --bg-card: #FFFFFF; --bg-input: #F1F5F9; --bg-hover: #F8F9FB; /* Borders */ --border: #E2E8F0; --border-focus: #EB6B0F; /* Text — WCAG AA compliant on white (#FFF) */ --text-primary: #0B386A; /* 9.5:1 contrast */ --text-secondary: #475569; /* 6.3:1 contrast */ --text-muted: #6B7280; /* 5.0:1 contrast (was #94A3B8 = 3.4:1) */ --text-hint: #94A3B8; /* decorative only, not for readable text */ --text-inverse: #FFFFFF; /* Brand */ --primary: #EB6B0F; --primary-hover: #D45A00; --primary-light: rgba(235, 107, 15, 0.1); --primary-soft: rgba(235, 107, 15, 0.08); --primary-ring: rgba(235, 107, 15, 0.25); --secondary: #0B386A; --secondary-light: rgba(11, 56, 106, 0.1); --secondary-soft: rgba(11, 56, 106, 0.06); /* Status */ --success: #10B981; --success-light: rgba(16, 185, 129, 0.1); --warning: #D97706; /* 3.3:1 on white (decorative); was #F59E0B = 2.1:1 */ --warning-light: rgba(217, 119, 6, 0.1); --warning-dark: #8A5300; /* 5.7:1 sobre --warning-light — texto legível */ --danger: #EF4444; --danger-light: rgba(239, 68, 68, 0.1); /* Gradients */ --gradient: linear-gradient(135deg, #EB6B0F 0%, #F59E0B 100%); --gradient-blue: linear-gradient(135deg, #0B386A 0%, #1E5A9E 100%); /* Pipeline */ --pipe-novos: #3B82F6; --pipe-qualificados: #8B5CF6; --pipe-andamento: #F59E0B; --pipe-documentos: #06B6D4; --pipe-fechado: #D97706; /* "Em Análise" — proposta na operadora (provável, não confirmada) */ --pipe-cliente: #059669; --pipe-perdido: #EF4444; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 8px 24px rgba(0,0,0,0.08); --shadow-xl: 0 16px 48px rgba(0,0,0,0.1); /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* Transition */ --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Focus ring */ --focus-ring: 0 0 0 3px var(--primary-ring); --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.25); } /* ═══════════════════════════════════════════════ TEMA "SNEAT" — 2º tema do CRM (seletor de 1 clique) Valores extraídos DIRETO do CSS compilado do template Sneat (ThemeSelection, MIT) — fidelidade máxima. Ativado via (assets/js/core/theme.js). O tema Clássico (acima) permanece o default. ═══════════════════════════════════════════════ */ :root[data-theme="sneat"] { --font-sans: 'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Backgrounds — body #f5f5f9, cards brancos, inputs brancos c/ borda */ --bg-white: #FFFFFF; --bg-light: #F5F5F9; --bg-card: #FFFFFF; --bg-input: #FFFFFF; --bg-hover: #F6F6FA; /* Borders — $border-color do Sneat */ --border: #D9DEE3; --border-focus: #696CFF; /* Text — headings #566a7f, body #697a8d (paleta cinza-azulada do Sneat) */ --text-primary: #566A7F; --text-secondary: #697A8D; --text-muted: #8592A3; --text-hint: #A1ACB8; --text-inverse: #FFFFFF; /* Brand — $primary #696cff (índigo assinatura do Sneat) */ --primary: #696CFF; --primary-hover: #5F61E6; --primary-light: rgba(105, 108, 255, 0.16); --primary-soft: rgba(105, 108, 255, 0.08); --primary-ring: rgba(105, 108, 255, 0.25); --secondary: #8592A3; --secondary-light: rgba(133, 146, 163, 0.16); --secondary-soft: rgba(133, 146, 163, 0.08); /* Status — família oficial do Sneat, em TOM ESCURECIDO para TEXTO legível: o #71DD37/#FFAB00 puros do template têm contraste ~1.6:1 sobre branco (auditoria 2026-07) — ilegíveis como texto. Mesmo matiz, mais escuro (regra do André: pode escurecer/clarear, nunca sair da paleta). Os fundos suaves (-light) continuam com o tom claro original. */ --success: #3FA51C; --success-light: rgba(113, 221, 55, 0.16); --warning: #B98900; --warning-light: rgba(255, 171, 0, 0.16); --warning-dark: #8A6600; /* 4.8:1 sobre --warning-light — texto legível */ --danger: #E8391A; --danger-light: rgba(255, 62, 29, 0.16); /* Gradients — família do índigo */ --gradient: linear-gradient(135deg, #696CFF 0%, #8F91FF 100%); --gradient-blue: linear-gradient(135deg, #5F61E6 0%, #696CFF 100%); /* Pipeline: NÃO muda — são semântica de dado (cada etapa tem sua cor aprendida pelos corretores), não estética. */ /* Shadows — a assinatura visual do Sneat: card = 0 2px 6px rgba(67,89,113,.12); elevações = rgba(161,172,184,…) */ --shadow-sm: 0 2px 6px 0 rgba(67, 89, 113, 0.12); --shadow-md: 0 0.25rem 1rem rgba(161, 172, 184, 0.45); --shadow-lg: 0 0.625rem 1.25rem rgba(161, 172, 184, 0.4); --shadow-xl: 0 1rem 2.5rem rgba(161, 172, 184, 0.5); /* Radius — base 0.375rem do Sneat (cantos mais retos que o Clássico) */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; /* Focus ring no índigo */ --focus-ring: 0 0 0 3px var(--primary-ring); --focus-ring-danger: 0 0 0 3px rgba(255, 62, 29, 0.25); } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Formulários e botões HERDAM a fonte do tema. Sem isto o browser usa a fonte default (Arial) em button/input/select — bug pré-existente pego pela auditoria visual de 2026-07 (valia até no tema Clássico). */ button, input, select, textarea { font-family: inherit; } body { font-family: var(--font-sans); background: var(--bg-light); color: var(--text-primary); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Smooth scrolling */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ::selection { background: var(--primary-soft); color: var(--primary); } input::placeholder { color: var(--text-muted); } /* Touch-friendly defaults for mobile */ @media (max-width: 768px) { input, select, textarea, button { font-size: 16px; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea { -webkit-appearance: none; } } @media (pointer: coarse) { button, a, .btn, [role="button"] { min-height: 44px; } } /* Global focus-visible for accessibility */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Skip link for keyboard navigation */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 10001; padding: 12px 24px; background: var(--primary); color: #fff; border-radius: 0 0 8px 8px; font-weight: 700; font-size: 14px; text-decoration: none; transition: top var(--transition); } .skip-link:focus { top: 0; }