/* ============================================================= esc-crm — Design Tokens Versão: 1.0 — 2026-04-27 Importar como PRIMEIRO arquivo CSS de qualquer página. Mudança de tema via ou "midnight". ============================================================= */ /* ---------- LIGHT (default) ---------- */ :root { /* Backgrounds */ --bg-base: #F4F6FA; --bg-surface: #FFFFFF; --bg-surface-2: #F8FAFC; --bg-surface-3: #EEF2F8; --bg-overlay: rgba(10, 26, 58, 0.55); --bg-skeleton: linear-gradient(90deg, #EEF2F8 0%, #F8FAFC 50%, #EEF2F8 100%); /* Borders */ --border-subtle: #E5EAF2; --border-default: #D9DEE8; --border-strong: #B7C0D2; /* Text */ --text-primary: #0A1A3A; --text-secondary: #4A5578; --text-disabled: #A0A8BC; --text-inverse: #FFFFFF; /* Brand institucional */ --brand-azul: #0A1A3A; --brand-azul-2: #102349; --brand-azul-3: #16315F; --brand-azul-link: #2B5FC0; --brand-azul-link-hover:#234FA3; --brand-dourado: #C8A84B; --brand-dourado-hover: #B8993F; --brand-dourado-soft: #F5EDD0; --icon-color: #7EB3FF; /* Semânticas */ --success: #1F7A4D; --success-bg: #EAF6EF; --warning: #B7791F; --warning-bg: #FFF6E5; --danger: #C0392B; --danger-bg: #FDEDEC; --info: #2563EB; --info-bg: #EAF1FF; /* States */ --state-hover: rgba(10, 26, 58, 0.04); --state-active: rgba(10, 26, 58, 0.08); --state-focus-ring: rgba(43, 95, 192, 0.35); /* Origens (cor da bolinha + texto da pílula) */ --origin-instagram: #E1306C; --origin-inlead: #7C3AED; --origin-meta: #1877F2; --origin-lp: #0EA5E9; --origin-trafego: #C8A84B; --origin-organico: #1F7A4D; --origin-indicacao: #0A1A3A; --origin-chat: #25D366; --origin-ativa: #B7791F; /* Avatar palette (12 cores estáveis em qualquer tema) */ --avatar-1: #2B5FC0; --avatar-2: #C8A84B; --avatar-3: #1F7A4D; --avatar-4: #C0392B; --avatar-5: #7C3AED; --avatar-6: #B7791F; --avatar-7: #0EA5E9; --avatar-8: #DB2777; --avatar-9: #4A5578; --avatar-10: #16315F; --avatar-11: #059669; --avatar-12: #9333EA; /* Tipografia */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-base: 15px; --line-base: 1.5; --font-h1: 28px; --font-h2: 22px; --font-h3: 18px; --font-h4: 16px; --font-h5: 14px; --font-h6: 12px; --font-body: 15px; --font-body-sm: 13px; --font-small: 12px; --font-micro: 11px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Espaçamento */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 48px; --pad-card: 20px; --pad-card-lg: 28px; /* Layout */ --sidebar-width: 270px; --sidebar-width-collapsed: 72px; --header-height: 64px; --content-pad-x: 28px; --content-pad-y: 24px; --detail-panel-width: 420px; --max-modal-width: 640px; --max-modal-width-lg: 960px; /* Radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Shadows */ --shadow-1: 0 1px 2px rgba(10, 26, 58, 0.04); --shadow-2: 0 2px 6px rgba(10, 26, 58, 0.06); --shadow-3: 0 8px 24px rgba(10, 26, 58, 0.10); --shadow-drag: 0 12px 32px rgba(10, 26, 58, 0.18); /* Avatar sizes */ --avatar-sm: 24px; --avatar: 32px; --avatar-lg: 40px; --avatar-xl: 64px; /* Animation */ --ease-micro: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-micro: 150ms; --dur-out: 250ms; --dur-in-out: 300ms; --dur-spring: 400ms; /* Sidebar/Header colors (light: sidebar permanece azul institucional, igual Hub) */ --sidebar-bg: var(--brand-azul); --sidebar-text: rgba(255, 255, 255, 0.75); --sidebar-text-active:#FFFFFF; --sidebar-section: rgba(255, 255, 255, 0.35); --sidebar-icon: var(--icon-color); --sidebar-active-bg: rgba(43, 95, 192, 0.25); --sidebar-border: rgba(255, 255, 255, 0.08); --header-bg: var(--bg-surface); --header-border: var(--border-subtle); } /* ---------- DARK ---------- */ :root[data-theme="dark"] { --bg-base: #0B1220; --bg-surface: #121C2E; --bg-surface-2: #172238; --bg-surface-3: #1F2C45; --bg-overlay: rgba(0, 0, 0, 0.65); --bg-skeleton: linear-gradient(90deg, #172238 0%, #1F2C45 50%, #172238 100%); --border-subtle: #1F2C45; --border-default: #2A3A57; --border-strong: #3D5179; --text-primary: #E6EAF2; --text-secondary: #A6B0C5; --text-disabled: #5C6680; --text-inverse: #0A1A3A; /* Em dark, azul institucional vira "tinta" não fundo dominante. A sidebar muda para uma surface escura — não mais azul saturado. */ --brand-azul: #16315F; --brand-azul-2: #1E3D75; --brand-azul-3: #295088; --brand-azul-link: #5B8DEF; --brand-azul-link-hover:#4778D8; --brand-dourado: #D4B85C; --brand-dourado-hover: #C4A847; --brand-dourado-soft: rgba(212, 184, 92, 0.16); --icon-color: #93C0FF; --success-bg: rgba(31, 122, 77, 0.18); --warning-bg: rgba(183, 121, 31, 0.18); --danger-bg: rgba(192, 57, 43, 0.18); --info-bg: rgba(91, 141, 239, 0.18); --success: #4FAE7E; --warning: #D4A04A; --danger: #E36657; --info: #7EA8F3; --state-hover: rgba(255, 255, 255, 0.05); --state-active: rgba(255, 255, 255, 0.10); --state-focus-ring: rgba(91, 141, 239, 0.45); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-drag: 0 12px 32px rgba(0, 0, 0, 0.70); /* Sidebar no dark: usa surface-2, não mais azul institucional */ --sidebar-bg: var(--bg-surface); --sidebar-text: rgba(230, 234, 242, 0.75); --sidebar-text-active:#FFFFFF; --sidebar-section: rgba(230, 234, 242, 0.35); --sidebar-icon: #93C0FF; --sidebar-active-bg: rgba(91, 141, 239, 0.18); --sidebar-border: rgba(255, 255, 255, 0.06); --header-bg: var(--bg-surface); --header-border: var(--border-subtle); } /* ---------- MIDNIGHT (deep focus / OLED) ---------- */ :root[data-theme="midnight"] { --bg-base: #000000; --bg-surface: #0A0F1A; --bg-surface-2: #11182B; --bg-surface-3: #19223A; --bg-overlay: rgba(0, 0, 0, 0.80); --bg-skeleton: linear-gradient(90deg, #11182B 0%, #19223A 50%, #11182B 100%); --border-subtle: #1A2238; --border-default: #243150; --border-strong: #36476E; --text-primary: #ECEEF5; --text-secondary: #9EA8BD; --text-disabled: #525B73; --text-inverse: #000000; --brand-azul: #1E3D75; --brand-azul-link: #6E9BF2; --brand-azul-link-hover:#5887E5; --brand-dourado: #D9BD63; --brand-dourado-hover: #C9AC50; --brand-dourado-soft: rgba(217, 189, 99, 0.14); --icon-color: #A6CBFF; --success-bg: rgba(31, 122, 77, 0.14); --warning-bg: rgba(183, 121, 31, 0.14); --danger-bg: rgba(192, 57, 43, 0.14); --info-bg: rgba(110, 155, 242, 0.14); --success: #5BB988; --warning: #DBA755; --danger: #E97262; --info: #8AB4F5; --state-hover: rgba(255, 255, 255, 0.04); --state-active: rgba(255, 255, 255, 0.08); --state-focus-ring: rgba(110, 155, 242, 0.50); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.50); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.60); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.75); --shadow-drag: 0 12px 32px rgba(0, 0, 0, 0.85); --sidebar-bg: #050810; --sidebar-text: rgba(236, 238, 245, 0.75); --sidebar-text-active:#FFFFFF; --sidebar-section: rgba(236, 238, 245, 0.30); --sidebar-icon: #A6CBFF; --sidebar-active-bg: rgba(110, 155, 242, 0.20); --sidebar-border: rgba(255, 255, 255, 0.04); --header-bg: var(--bg-surface); --header-border: var(--border-subtle); } /* ============================================================= PREMIUM EXTENSIONS — Apple / Hermes / Loro Piana Tokens adicionados para o kanban premium (light + dark). Tudo aqui é ESTENSÃO, não substituição. ============================================================= */ :root { /* Tipografia serifada institucional (display / etapas / monograma) */ --font-serif: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', Georgia, serif; --font-serif-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; /* Off-white quente (Loro Piana) — substitui o branco puro em superfícies premium */ --bg-cream: #FAF8F3; /* fundo de página premium */ --bg-cream-2: #F5F3EE; /* coluna do kanban */ --bg-cream-3: #EFEBE2; /* hover de coluna / drop zone */ --bg-paper: #FBF9F4; /* card de lead */ /* Tons quentes de texto (sépia / taupe) */ --warm-taupe: #8B7355; --warm-sepia: #6B4423; --warm-stone: #A8997D; --warm-line: #D9D2C2; /* divisor fino, mais quente que cinza-frio */ /* Cores serenas para etapas do funil (cada uma com sua tinta sutil) */ --stage-entrada: #6B4423; /* sépia escuro */ --stage-pre: #16315F; /* azul-marinho institucional */ --stage-desqualificado: #8B6F6A; /* rosa-velho mortinho */ --stage-qualificacao: #4A5578; /* azul-acinzentado */ --stage-qualificado: #B8993F; /* dourado escuro */ --stage-reuniao-ag: #6B7A4E; /* verde-oliva */ --stage-noshow: #7A2E2E; /* vinho discreto */ --stage-reuniao-real: #2E5A3E; /* verde-floresta médio */ --stage-proposta: #9C7A2E; /* ouro escuro */ --stage-contrato: #1F4A2E; /* verde-floresta profundo */ --stage-standby: #6B6B6B; /* cinza-pedra */ /* Linhas e ornamentos dourados */ --gold-hairline: rgba(200, 168, 75, 0.30); /* linha 1px sob títulos */ --gold-hairline-2: rgba(200, 168, 75, 0.55); --gold-hairline-strong: rgba(200, 168, 75, 0.80); /* Sombra premium — mais larga e suave que --shadow-1 */ --shadow-paper: 0 1px 2px rgba(60, 45, 25, 0.04), 0 2px 8px rgba(60, 45, 25, 0.05); --shadow-paper-lift: 0 2px 4px rgba(60, 45, 25, 0.06), 0 8px 24px rgba(60, 45, 25, 0.08); --shadow-card-gold: 0 1px 2px rgba(60, 45, 25, 0.05), 0 2px 8px rgba(200, 168, 75, 0.10); /* Saúde do lead — gradiente do mini-bar */ --health-cool: #6B7A4E; --health-warm: #C8A84B; --health-hot: #B5523B; /* Marble accent — gradient diagonal sutilíssimo para alguns cards premium */ --marble-accent: linear-gradient(135deg, rgba(200, 168, 75, 0.06) 0%, rgba(255, 255, 255, 0) 60%); } /* Dark — adapta as extensões premium para o modo escuro */ :root[data-theme="dark"] { --bg-cream: #0E1424; --bg-cream-2: #131A2C; --bg-cream-3: #1A2238; --bg-paper: #16203A; --warm-taupe: #B5A687; --warm-sepia: #C8A87A; --warm-stone: #998B72; --warm-line: #2A3A57; --stage-entrada: #C8A87A; --stage-pre: #93C0FF; --stage-desqualificado: #B59A95; --stage-qualificacao: #A6B0C5; --stage-qualificado: #D4B85C; --stage-reuniao-ag: #A8B785; --stage-noshow: #E36657; --stage-reuniao-real: #6FB58A; --stage-proposta: #D9BE5E; --stage-contrato: #6FB58A; --stage-standby: #9AA0AB; --gold-hairline: rgba(212, 184, 92, 0.30); --gold-hairline-2: rgba(212, 184, 92, 0.55); --gold-hairline-strong: rgba(212, 184, 92, 0.85); --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-paper-lift: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-card-gold: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 10px rgba(212, 184, 92, 0.18); --marble-accent: linear-gradient(135deg, rgba(212, 184, 92, 0.08) 0%, rgba(255, 255, 255, 0) 60%); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0ms; --dur-out: 0ms; --dur-in-out: 0ms; --dur-spring: 0ms; } }