/* ============================================================================ tokens.css , CRM White-Label ============================================================================ Sistema de tokens CSS Custom Properties. Estes valores sao FALLBACK. Em runtime, /painel/config.js (gerado a partir de config/client.json) sobrescreve --color-* via :root inline-style, garantindo o tema do cliente sem rebuild. Camadas: 1. Brand cores (--color-*) ← geradas a partir de brand.cores 2. Semantic (bg, text, border) ← apontam pras brand cores 3. Component (badges 9 etapas) ← tokens fixos pra dark theme 4. Geometria (radius, gap, shadow) 5. Tipografia (escala, family) 6. Estados (hover, focus, active) 7. Motion (duration, ease) Cliente piloto: Inspira Marcas (azul-petroleo #173C46 + dourado #A6875C). Paleta original MCK (terracota #BB795E) preservada como historico em comentarios. Valores em uso: Inspira Marcas. ============================================================================ */ :root { /* ========================================================================== 1) BRAND , sobrescritas em runtime por /painel/config.js ========================================================================== */ --color-primary: #7A0F2E; /* bordô Dra. Sharon Raicher (era petroleo Inspira) */ --color-accent: #C49A6C; /* dourado mais rico Inspira v4 (+20% sat vs #A6875C; era #BB795E terracota MCK) */ --color-accent-deep: #5C0B22; /* bordô escuro (hover de acao) — era ouro */ --color-text-dark: #5C4A2F; /* dourado mais escuro p/ contraste (era #7E4830) */ --color-muted: #5C636A; --color-bg-dark: #0F2A32; /* bg dark azulado Inspira (era #0d0d0d) */ --color-bg-card: #1F4D5A; /* card +10% lum vs primary p/ hierarquia v4 (era #173C46 idêntico ao primary; era #1a1a1a MCK) */ --color-border: #2A4A55; /* border azulada (era #2a2a2a) */ --color-text-light: #FAF6EF; /* cream-soft Inspira (era #e8e8e8) */ --color-danger: #B23A48; /* vermelho institucional Inspira (era #dc2626) */ --color-success: #3F6B5F; /* verde sobrio Inspira (era #16a34a) */ --color-warning: #eab308; /* Variantes do accent (05/10/20/40/60 em rgba pra hovers/borders sem rebuild) Recalculadas para o dourado #C49A6C v4 = rgba(196, 154, 108, x). */ --color-accent-05: rgba(196, 154, 108, 0.05); --color-accent-10: rgba(196, 154, 108, 0.10); --color-accent-20: rgba(196, 154, 108, 0.20); --color-accent-40: rgba(196, 154, 108, 0.40); --color-accent-60: rgba(196, 154, 108, 0.60); /* Whites em rgba pra borders/dividers/hovers */ --color-white-05: rgba(255, 255, 255, 0.05); --color-white-08: rgba(255, 255, 255, 0.08); --color-white-10: rgba(255, 255, 255, 0.10); --color-white-30: rgba(255, 255, 255, 0.30); --color-white-40: rgba(255, 255, 255, 0.40); --color-white-60: rgba(255, 255, 255, 0.60); /* ========================================================================== 2) SEMANTIC , apontam pra brand. Componentes consomem APENAS estes. ========================================================================== */ --bg-app: var(--color-bg-dark); --bg-surface: var(--color-bg-card); /* cards, modal, inputs */ --bg-surface-hover: rgba(255, 255, 255, 0.04); --bg-overlay: rgba(0, 0, 0, 0.80); /* modal backdrop */ /* Reservado: Onda 2 light theme re-mapeia. Hoje preserva visual flat do dark. */ --bg-elevated: transparent; --bg-secondary: transparent; --color-bg-soft: transparent; --text-primary: var(--color-text-light); /* texto principal */ --text-secondary: var(--color-white-60); /* legendas, subtitulos */ --text-tertiary: var(--color-white-40); /* placeholders, eixos */ --text-disabled: var(--color-white-30); --text-on-accent: var(--color-primary); /* texto azul-petroleo #173C46 SOBRE botao dourado #A6875C (ratio ~5.2:1, AA OK). Era #1a1a1a sobre terracota MCK. */ --border-subtle: var(--color-white-08); --border-default: var(--color-border); --border-strong: var(--color-white-30); --border-accent: var(--color-accent); --link: var(--color-accent); --link-hover: var(--color-accent-deep); /* ========================================================================== 3) BADGES , 9 cores das etapas do funil (dark theme compatível) Padrao: bg em alpha 12-15% + text em tom claro que valida AA sobre #0F2A32 (Inspira) / #0d0d0d (MCK legacy) >=4.5:1 + border em alpha 24%. Cores ESCOLHIDAS pra harmonizar com o dourado Inspira (#A6875C) e nao roubar protagonismo do accent. Saturacao reduzida em 15-20% vs Tailwind. Originalmente calibradas pra terracota MCK; revalidadas WCAG AA sobre novo bg #0F2A32 (todas mantem >=4.5:1 com cor de texto sugerida). ========================================================================== */ /* cinza , Lead Captado (estado neutro inicial) */ --badge-cinza-bg: rgba(148, 163, 184, 0.12); --badge-cinza-text: #cbd5e1; --badge-cinza-border: rgba(148, 163, 184, 0.28); /* azul , Contato Iniciado */ --badge-azul-bg: rgba(59, 130, 246, 0.14); --badge-azul-text: #93c5fd; --badge-azul-border: rgba(59, 130, 246, 0.30); /* azul_claro , Lead Respondeu */ --badge-azul-claro-bg: rgba(56, 189, 248, 0.14); --badge-azul-claro-text: #7dd3fc; --badge-azul-claro-border: rgba(56, 189, 248, 0.30); /* amarelo , Qualificado */ --badge-amarelo-bg: rgba(234, 179, 8, 0.14); --badge-amarelo-text: #fde047; --badge-amarelo-border: rgba(234, 179, 8, 0.32); /* laranja , Diagnostico Agendado */ --badge-laranja-bg: rgba(249, 115, 22, 0.16); --badge-laranja-text: #fdba74; --badge-laranja-border: rgba(249, 115, 22, 0.34); /* laranja_escuro , Diagnostico Realizado */ --badge-laranja-escuro-bg: rgba(217, 96, 28, 0.18); --badge-laranja-escuro-text: #fb923c; --badge-laranja-escuro-border: rgba(217, 96, 28, 0.36); /* roxo , Proposta Enviada */ --badge-roxo-bg: rgba(168, 85, 247, 0.14); --badge-roxo-text: #d8b4fe; --badge-roxo-border: rgba(168, 85, 247, 0.30); /* verde , Fechado Ganho */ --badge-verde-bg: rgba(34, 197, 94, 0.14); --badge-verde-text: #86efac; --badge-verde-border: rgba(34, 197, 94, 0.32); /* vermelho , Fechado Perdido */ --badge-vermelho-bg: rgba(239, 68, 68, 0.14); --badge-vermelho-text: #fca5a5; --badge-vermelho-border: rgba(239, 68, 68, 0.32); /* ========================================================================== 4) GEOMETRIA , radius + spacing scale (8px base) ========================================================================== */ --radius-xs: 2px; --radius-sm: 4px; /* cards kanban, inputs, buttons (modelo usa 4px) */ --radius-md: 6px; --radius-lg: 8px; /* modal */ --radius-pill: 9999px; /* badges */ --gap-0: 0; --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; /* grid de inputs */ --gap-5: 20px; --gap-6: 24px; /* padding de cards e modal */ --gap-8: 32px; --gap-10: 40px; --gap-12: 48px; --gap-16: 64px; /* Width tokens */ --kanban-col-width: 250px; --modal-max-width: 720px; --container-max: 1280px; /* Shadows (flat por padrao, exceto modal) */ --shadow-none: none; --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.65); --shadow-focus: 0 0 0 3px var(--color-accent-40); /* ========================================================================== 5) TIPOGRAFIA , FONTE UNICA: Inter pra tudo (sem serifa). Decisao Gustavo 2026-05-29: 1 fonte sans que combine com advogado; Fraunces/Playfair (serif) removidas — numeros ruins + abas nao conversavam. ========================================================================== */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, 'Menlo', monospace; /* Escala (tipografica modular ratio 1.2 , minor third) */ --fs-xs: 11px; /* labels CAPS de secao no modal */ --fs-sm: 12px; /* eixos de grafico, micro-textos */ --fs-base: 14px; /* body padrao do painel (UI compacta) */ --fs-md: 16px; /* descricoes, paragrafos longos */ --fs-lg: 18px; /* card kanban , nome do lead */ --fs-xl: 20px; /* h3 (LEADS POR DIA) */ --fs-2xl: 24px; /* h2, valor de stat-card */ --fs-3xl: 30px; /* h1 (CRM MCK), nome do lead no modal */ --fs-4xl: 36px; --fs-stat: 32px; /* valor R$ nos cards do dashboard */ /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Line-height */ --lh-tight: 1.15; /* headings serif */ --lh-snug: 1.35; /* h2-h3 */ --lh-normal: 1.5; /* body */ --lh-relaxed: 1.65; /* paragraph longo */ /* Letter-spacing */ --ls-caps: 0.08em; /* labels CAPS de secao */ --ls-tight: -0.01em; /* h1 serif */ --ls-normal: 0; /* ========================================================================== 6) ESTADOS , hover, focus, active, disabled ========================================================================== */ --hover-bg: var(--bg-surface-hover); --hover-border: var(--color-accent-60); --focus-ring: var(--shadow-focus); --focus-outline: 2px solid var(--color-accent); --active-bg: var(--color-accent-deep); --disabled-opacity: 0.5; /* ========================================================================== 7) MOTION , duration + easing (respeitam prefers-reduced-motion) ========================================================================== */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default UI */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* drop card no kanban */ --transition-base: all var(--duration-fast) var(--ease-out); --transition-color: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-base) var(--ease-out); /* ========================================================================== 8) Z-INDEX , camadas ========================================================================== */ --z-base: 0; --z-kanban-drag: 100; --z-tooltip: 500; --z-modal-overlay: 900; --z-modal: 1000; --z-toast: 1500; } /* ============================================================================ LIGHT THEME (Inspira), ativado via [data-theme="light"] no Onda 2 do redesign. Sobrescreve BRAND + SEMANTIC + BADGES + SHADOWS + FONTS. Tema dark (default :root) permanece intocado ate cutover das demais telas. Fonte de verdade: design-spec-light-inspira.md v2.1. ============================================================================ */ :root[data-theme="light"] { /* ---- BRAND (light) — OVERHAUL CONTRASTE/COR AAA (Gustavo 2026-06-02) ---- Direcao "Mais limpo / maxima clareza": superficies BRANCAS (sai o cream), texto tinta escura, azul-petroleo #173C46 como acento forte, OURO REMOVIDO como cor de UI (so filete decorativo). Texto normal >=7:1, UI/borda >=3:1. */ --color-primary: #7A0F2E; /* bordô Dra. Sharon Raicher — acento forte */ --color-primary-deep: #5C0B22; /* hover de primary (bordô escuro) */ --color-primary-hover: #5C0B22; /* alias hover */ /* Dourado: SO filete decorativo. JAMAIS texto/icone/estado. */ --color-gold-line: #B8975C; /* filete 1-2px decorativo (unico uso de ouro) */ /* Aliases legados de accent re-apontados pra petroleo (mata ouro-como-cor de UI que vinha por cascata via --color-accent em arquivos antigos). */ --color-accent: #173C46; /* era #A6875C ouro — agora petroleo (fills/estado) */ --color-accent-hover: #0F2A32; /* era #8B6F47 */ --color-accent-deep: #5C0B22; /* bordô escuro (hover de acao) */ --color-accent-soft: #B8975C; /* mantido p/ filete decorativo eventual */ --color-cream: #F8FAFC; /* era #FAF1E1 — agora slate-50 frio */ --color-cream-soft: #F4F6F9; /* era #FAF6EF cream — agora app slate cool */ --color-cream-deeper: #F8FAFC; /* era #F2EADC — agora surface elevada fria */ --color-ink-text: #334155; /* slate-700 body */ --color-ink-deep: #0F172A; /* slate-900 — texto primario forte (era #173C46) */ --color-bg-pure: #FFFFFF; /* branco puro de cards/inputs/modal */ --color-border-warm: #E2E8F0; /* era #E8DFD0 — slate-200 subtle */ --color-border-warm-strong: #CBD5E1; /* era #D4C5A8 — slate-300 default */ --color-danger: #B23A48; /* fill de marca */ --color-danger-text: #991B1B; /* danger COMO TEXTO red-800 (~7.0:1 AAA) */ --color-success: #16A34A; /* fill (switch ON) */ --color-success-text: #166534; /* success COMO TEXTO (~6.4:1) */ --color-warning: #92400E; /* warning COMO TEXTO (~7.2:1) */ /* RGBAs de accent re-apontados pro petroleo #173C46 = rgba(23,60,70,x). (Eram ouro #A6875C; mantemos os nomes p/ nao quebrar consumidores antigos.) */ --color-accent-05: rgba(23, 60, 70, 0.05); --color-accent-10: rgba(23, 60, 70, 0.10); --color-accent-20: rgba(23, 60, 70, 0.20); --color-accent-40: rgba(23, 60, 70, 0.40); --color-accent-60: rgba(23, 60, 70, 0.60); /* Tints de azul-petroleo #173C46 para estados ativos/hover/selecionados. */ --color-primary-06: rgba(23, 60, 70, 0.06); --color-primary-10: rgba(23, 60, 70, 0.10); --color-primary-20: rgba(23, 60, 70, 0.20); /* ---- SEMANTIC (light) ---- */ --bg-app: #F4F6F9; /* slate cool claro (era cream #FAF6EF) */ --bg-surface: #FFFFFF; /* cards, modal, inputs, kanban-card */ --bg-surface-elevated: #F8FAFC; /* aninhado/segmented (era #F2EADC) */ --bg-surface-hover: rgba(23, 60, 70, 0.04); --bg-overlay: rgba(15, 23, 42, 0.55); /* backdrop slate-900 translucido, definido */ --bg-header: #173C46; /* faixa petroleo (texto branco 10.6:1) */ --bg-header-elevated: #0F2A32; /* header sticky scroll */ --text-primary: #0F172A; /* slate-900 ~17:1 — titulos/KPIs */ --text-secondary: #334155; /* slate-700 ~10.8:1 — labels/body */ --text-muted: #41505F; /* slate-600+ ~8.2:1 surface / ~7.5:1 app — piso AAA hint/caption/empty */ --text-tertiary: #41505F; /* alias de muted (era opacity .65) — piso AAA em qualquer fundo claro */ --text-placeholder: #64748B; /* slate-500 ~4.8:1 — SO placeholder */ --text-disabled: #94A3B8; /* slate-400 SOLIDO — nunca via opacity */ --text-on-primary: #FFFFFF; /* branco sobre header/btn petroleo (10.6:1) */ --text-on-accent: #FFFFFF; /* branco sobre fill petroleo */ --text-eyebrow: #334155; /* era ouro #7A5F3D — agora slate-700 (10.8:1) */ --border-subtle: #E2E8F0; /* slate-200 divisores/hairline */ --border-default: #CBD5E1; /* slate-300 cards (visivel) */ --border-strong: #64748B; /* slate-500 ~4.8:1 — borda forte visivel */ --border-interactive: #64748B; /* slate-500 borda input/select em repouso (>=3:1) + foco petroleo */ --border-accent: #173C46; /* foco/ativo/selected petroleo (>=3:1) */ --link: #173C46; /* petroleo (era ouro #7A5F3D) */ --link-hover: #0F2A32; /* sublinhado no hover (ver components.css) */ /* ---- BADGES (light, revalidados v2.1 contra branco do card #FFFFFF) ---- */ /* cinza, Lead Captado */ --badge-cinza-bg: rgba(100, 116, 139, 0.12); --badge-cinza-text: #475569; --badge-cinza-border: rgba(100, 116, 139, 0.28); /* azul, Contato Iniciado */ --badge-azul-bg: rgba(37, 99, 235, 0.12); --badge-azul-text: #1d4ed8; --badge-azul-border: rgba(37, 99, 235, 0.30); /* azul-claro, Lead Respondeu */ --badge-azul-claro-bg: rgba(14, 165, 233, 0.14); --badge-azul-claro-text: #0369a1; --badge-azul-claro-border: rgba(14, 165, 233, 0.30); /* amarelo, Qualificado (text escurecido v2.1: #854d0e -> #713F0D) */ --badge-amarelo-bg: rgba(202, 138, 4, 0.16); --badge-amarelo-text: #713F0D; --badge-amarelo-border: rgba(202, 138, 4, 0.34); /* laranja, Diagnostico Agendado (text escurecido v2.1: #9a3412 -> #7C2D12) */ --badge-laranja-bg: rgba(234, 88, 12, 0.14); --badge-laranja-text: #7C2D12; --badge-laranja-border: rgba(234, 88, 12, 0.30); /* laranja-escuro, Diagnostico Realizado */ --badge-laranja-escuro-bg: rgba(194, 65, 12, 0.18); --badge-laranja-escuro-text: #7C2D12; --badge-laranja-escuro-border: rgba(194, 65, 12, 0.36); /* roxo, Proposta Enviada */ --badge-roxo-bg: rgba(126, 34, 206, 0.14); --badge-roxo-text: #6b21a8; --badge-roxo-border: rgba(126, 34, 206, 0.30); /* verde, Fechado Ganho (text escurecido v2.1: #3F6B5F -> #2F5147) */ --badge-verde-bg: rgba(63, 107, 95, 0.18); --badge-verde-text: #2F5147; --badge-verde-border: rgba(63, 107, 95, 0.36); /* vermelho, Fechado Perdido (text escurecido v2.1: #B23A48 -> #9A2F3C) */ --badge-vermelho-bg: rgba(178, 58, 72, 0.16); --badge-vermelho-text: #9A2F3C; --badge-vermelho-border: rgba(178, 58, 72, 0.34); /* ---- SHADOWS (light precisa de relevo sutil tom azulado, nao preto) ---- */ --shadow-card: 0 1px 2px rgba(23, 60, 70, 0.04), 0 1px 3px rgba(23, 60, 70, 0.06); --shadow-card-hover: 0 4px 12px -4px rgba(23, 60, 70, 0.10), 0 2px 4px rgba(23, 60, 70, 0.06); --shadow-modal: 0 25px 50px -12px rgba(15, 42, 50, 0.30); --shadow-focus: 0 0 0 3px rgba(23, 60, 70, 0.35); /* foco PETROLEO forte (era ouro) */ --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 12px -6px rgba(15, 42, 50, 0.20); /* ---- TYPOGRAPHY (fonte unica: Inter pra tudo, sem serifa — decisao Gustavo 2026-05-29: numeros Fraunces ruins + abas nao conversavam. --font-display agora aponta pra a sans, entao titulos/KPIs/h1 que usavam Fraunces viram Inter). ---- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: var(--font-sans); --fs-stat: 32px; --fs-headline: 40px; /* login headline */ --ls-caps: 0.18em; /* eyebrow CAPS (espelha .eyebrow do site) */ --ls-caps-loose: 0.08em; --ls-tight: -0.015em; /* Easing extra do site (botoes + filete tabs) */ --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-quart-out: cubic-bezier(0.25, 1, 0.5, 1); /* ========================================================================== ONDA 7D , componentes (alturas/paddings/badges/cards/trend/icons) Consumidos por onda-7d.css. Light theme scope. NAO mexer no dark. ========================================================================== */ /* Botoes -- 3 tamanhos canonicos */ --btn-h-sm: 32px; --btn-h-md: 36px; --btn-h-lg: 40px; --btn-pad-x-sm: 12px; --btn-pad-x-md: 14px; --btn-pad-x-lg: 16px; /* Inputs/Selects/Textareas */ --input-h: 40px; --input-pad-x: 14px; /* Badges unificados (temperatura + stage + trend) */ --badge-h: 22px; --badge-pad-x: 8px; /* Cards */ --card-pad: 24px; --card-pad-compact: 16px; --stat-card-min-h: 144px; /* Temperatura saturada (atual pastel demais). 1 implementacao visual, 4 variants (frio/morno/quente/sem). Aplicada via .badge-unified. */ --temp-frio-bg: rgba(37, 99, 235, 0.08); --temp-frio-text: #1D4ED8; /* azul COMO TEXTO (~6.3:1) */ --temp-frio-border: #2563EB; /* borda-esquerda solida >=3:1 */ --temp-morno-bg: rgba(146, 64, 14, 0.08); --temp-morno-text: #92400E; /* amber-800 (~7.2:1 AAA) */ --temp-morno-border: #B45309; /* borda-esquerda solida >=3:1 */ --temp-quente-bg: rgba(185, 28, 28, 0.08); --temp-quente-text: #B91C1C; /* red-700 (~5.9:1) */ --temp-quente-border:#DC2626; /* borda-esquerda solida >=3:1 */ --temp-sem-bg: rgba(71, 85, 105, 0.06); --temp-sem-text: #475569; /* slate-600 (~7.5:1 AAA) */ --temp-sem-border: #94A3B8; /* slate-400 borda >=3:1 */ /* Trend pill (extrai #0F7D5C / #B23A48 hardcoded no onda-7b) */ --trend-up-bg: rgba(22, 101, 52, 0.10); --trend-up-text: #166534; /* green-800 (~6.4:1) */ --trend-down-bg: rgba(185, 28, 28, 0.10); --trend-down-text: #B91C1C; /* red-700 (~5.9:1) */ --trend-neutral-bg: rgba(71, 85, 105, 0.08); --trend-neutral-text: #475569; /* slate-600 (~7.5:1 AAA) */ /* Iconografia */ --icon-stroke: 2; --icon-stroke-thin: 1.5; } /* ============================================================================ Reduced motion , A11y obrigatorio (WCAG 2.3.3) ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --transition-base: none; --transition-color: none; --transition-transform: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }