/* ============================================================= brand-tokens.css — LIDERA BRASIL Fonte única de verdade dos tokens visuais da marca. Documento de referência: BRAND_BOOK.md (raiz do projeto). Carregar ANTES de visao-geral-premium.css em cada painel. NÃO substitui os tokens antigos do premium-dashboard.css — convive em paralelo (prefix --lb-*). ============================================================= */ @layer legacy { :root{ /* ── Camada DRAMÁTICA (landing, hero, sidebar, mapa) ── */ --lb-bg-deep: #040608; --lb-bg-night: #0A1420; --lb-petrol-1: #0E3A4D; --lb-petrol-2: #1B5A75; --lb-petrol-3: #2A7E9F; --lb-cyan-electric: #38BDF8; --lb-cyan-soft: #E0F2FE; /* ── Camada CLARA (KPIs, cards, tabelas, formulários) ── */ --lb-bg-light: #FAFAFA; --lb-surface: #FFFFFF; --lb-surface-alt: #F8FAFC; --lb-border: #E2E8F0; --lb-border-strong: #CBD5E1; /* ── Texto (escala Slate) ── */ --lb-text-1: #0F172A; --lb-text-2: #334155; --lb-text-mute: #64748B; --lb-text-soft: #94A3B8; /* ── Texto sobre fundo escuro ── */ --lb-text-on-dark: #FFFFFF; --lb-text-on-dark-mute: rgba(226,232,240,0.75); --lb-text-on-dark-soft: rgba(226,232,240,0.55); /* ── Acentos semânticos ── */ --lb-success: #10B981; --lb-warning: #D97706; --lb-danger: #DC2626; /* ── Acento dourado (assinatura institucional — usado em halos/destaques de liderança como na rosa dos ventos). ── */ --lb-gold: #D4AF37; --lb-gold-deep: #7C5A0E; /* ── Gradientes assinatura ── */ --lb-petrol-grad: linear-gradient(135deg,#0E3A4D 0%,#1B5A75 50%,#2A7E9F 100%); --lb-petrol-bright: linear-gradient(135deg,#1B5A75 0%,#2A7E9F 50%,#38BDF8 100%); --lb-petrol-soft: linear-gradient(135deg,rgba(14,58,77,0.18) 0%,rgba(56,189,248,0.10) 100%); --lb-petrol-deep-grad: linear-gradient(180deg,#040608 0%,#0A1420 60%,#0E3A4D 100%); /* ── Efeitos assinatura ── */ --lb-neon-glow: 0 0 24px -4px rgba(56,189,248,0.55), 0 0 60px -16px rgba(56,189,248,0.4); --lb-neon-glow-soft: 0 0 16px -2px rgba(56,189,248,0.35); --lb-glass-bg: rgba(255,255,255,0.025); --lb-glass-bg-hover: rgba(255,255,255,0.045); --lb-glass-border: rgba(255,255,255,0.08); --lb-glass-border-hover: rgba(56,189,248,0.32); --lb-glass-shadow: 0 24px 60px -28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); --lb-grid-line: rgba(148,163,184,0.045); /* ── Tipografia ── */ --lb-font: 'Inter', system-ui, -apple-system, sans-serif; --lb-font-features: 'cv11','ss01','ss03'; /* Escala (clamp responsivo) */ --lb-h-display: clamp(48px, 7vw, 96px); --lb-h-1: clamp(32px, 4vw, 56px); --lb-h-2: clamp(24px, 3vw, 40px); --lb-h-3: 22px; --lb-body: 14px; --lb-caption: 12px; /* Letter spacing assinatura */ --lb-ls-display: -0.055em; --lb-ls-headline: -0.02em; --lb-ls-eyebrow: 0.16em; --lb-ls-body: -0.1px; /* ── Tamanhos numéricos (KPIs e hero) ── */ --lb-num-mega: clamp(56px, 7.5vw, 96px); --lb-num-card: clamp(28px, 3vw, 36px); /* ── Easing padrão ── */ --lb-ease: cubic-bezier(.4,.0,.2,1); } /* ============================================================= DESIGN SYSTEM LIGHT — "Enterprise Soft Minimalism" (brief oficial) Camada canônica para a migração Light de toda a interface. Os tokens da camada DRAMÁTICA (neon/petrol) acima permanecem por compatibilidade, mas NÃO devem ser usados em superfícies novas. Superfícies novas referenciam SEMPRE os tokens abaixo. ============================================================= */ :root{ /* ── Superfícies (Light) ── */ --lb-app-bg: #F8FAFC; /* Fundo principal da aplicação */ --lb-card: #FFFFFF; /* Cards / modais */ --lb-card-alt: #F8FAFC; /* Superfície secundária / linhas zebra */ --lb-line: #E2E8F0; /* Bordas */ --lb-line-strong: #CBD5E1; /* Borda em hover / divisores fortes */ /* ── Texto (reaproveita escala Slate; aliases semânticos) ── */ --lb-ink: #0F172A; /* Texto principal */ --lb-ink-2: #334155; /* Texto secundário */ --lb-ink-mute: #64748B; /* Texto auxiliar */ --lb-ink-soft: #94A3B8; /* Placeholder / meta */ /* ── Acentos institucionais ── */ --lb-blue: #2563EB; /* Azul institucional */ --lb-blue-strong: #1D4ED8; /* Hover / pressed */ --lb-blue-tint: #EFF4FF; /* Fundo azulado leve (chips, estados) */ --lb-alert: #EF4444; /* Alertas / vermelho */ --lb-alert-tint: #FEF2F2; --lb-audit: #10B981; /* Auditoria / verde */ --lb-audit-soft: #34D399; /* Verde claro (gradiente suave/estados) */ --lb-audit-tint: #ECFDF5; /* ── Raio (estritamente 12–16px) ── */ --lb-radius-sm: 12px; --lb-radius-md: 14px; --lb-radius-lg: 16px; --lb-radius-pill: 999px; /* só para chips/badges/avatares */ /* ── Sombras leves / flutuantes (sem neon, sem áreas escuras) ── */ --lb-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06); --lb-shadow-md: 0 4px 12px -2px rgba(15,23,42,0.08), 0 2px 6px -2px rgba(15,23,42,0.05); --lb-shadow-lg: 0 12px 28px -8px rgba(15,23,42,0.12), 0 4px 10px -4px rgba(15,23,42,0.07); /* ── Foco acessível (anel azul institucional) ── */ --lb-focus-ring: 0 0 0 3px rgba(37,99,235,0.35); /* ── Touch target mínimo (Apple HIG / Material) ── */ --lb-touch-min: 44px; /* ── Hero "stage" — agora LIGHT ── Decisão (jun/2026): removido o palco escuro + esfera Spline 3D; o hero passa a ser claro (esfera própria sobre fundo branco virá depois). Como o hero foi tokenizado p/ --lb-stage*, virar estes 4 tokens converte o hero inteiro para Light. (Chrome do shell usa --lb-chrome, à parte.) */ --lb-stage: var(--lb-app-bg); /* era #000000 */ --lb-stage-text: var(--lb-ink); /* era #FFFFFF */ --lb-stage-glass: var(--lb-card); /* era rgba branco translúcido */ --lb-stage-glass-bd: var(--lb-line); /* Chrome do shell (sidebar/topbar) — superfície escura deliberada, coerente com o palco do hero. Mantida dark por decisão de design. */ --lb-chrome: #111111; /* ── Painel de conteúdo (admin/gestor/mobilizador) — recipe ÚNICA ── Fase 6: era glassmorphism (translúcido + blur + sombra roxa forte); agora card Light sólido conforme o brief (soft minimalism). */ --lb-panel-grad: var(--lb-card); /* branco sólido (era glass) */ --lb-panel-blur: none; /* sem backdrop-blur */ --lb-panel-border: var(--lb-line); /* #E2E8F0 */ --lb-panel-shadow: var(--lb-shadow-md); /* sombra leve, sem roxo */ /* ── Escala de espaçamento (base 4px) ── */ --lb-space-1: 4px; --lb-space-2: 8px; --lb-space-3: 12px; --lb-space-4: 16px; --lb-space-5: 20px; --lb-space-6: 24px; --lb-space-8: 32px; --lb-space-10: 40px; --lb-space-12: 48px; /* ── Z-index — ordem de empilhamento do shell (fim dos números mágicos) ── */ --lb-z-base: 1; --lb-z-sidebar: 40; /* rail desktop */ --lb-z-sidebar-open: 90; /* drawer mobile aberto */ --lb-z-topbar: 300; --lb-z-overlay: 9998; /* backdrop de drawer/modal */ --lb-z-toast: 9999; } /* Aplicar font-features Inter no body por padrão. (premium-dashboard.css já define font-family Inter no body.) */ body{ font-feature-settings: var(--lb-font-features); } }