/* ═══════════════════════════════════════════════════════════════════════════ HEXTECH IA — DESIGN TOKENS (hextech-tokens.css) ═══════════════════════════════════════════════════════════════════════════ CAMADA 1 do design system. Nenhum seletor de componente vive aqui — apenas variáveis. Importe este arquivo ANTES de hextech-ui.css. Os valores são os MESMOS primitivos do app desktop (desktop/src/index.css + desktop/src/ui/tokens.css), namespaced com `--hx-` para poderem coexistir com qualquer outro CSS sem colisão. Isso permite importar este arquivo no painel do cliente, no painel admin, na página de preços, no onboarding ou no login e obter exatamente a mesma linguagem visual. COMO CUSTOMIZAR: - Trocar a cor da marca → --hx-cyan / --hx-gold (tudo deriva delas) - Trocar fundo global → --hx-bg-deep / --hx-bg-base - Trocar fontes → bloco TIPOGRAFIA (e o @import de fontes no da página que consumir isto) - Escurecer/clarear cartões → bloco SUPERFÍCIES ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── MARCA ───────────────────────────────────────────────────── As duas cores que definem Hextech: energia arcana (ciano) e engenharia de Piltover (ouro). Todo brilho/borda deriva delas. */ --hx-cyan: #00e5ff; --hx-cyan-bright: #7df4ff; /* núcleo de cristal / hot spots */ --hx-cyan-deep: #0a7fb8; /* profundidade do cristal */ --hx-gold: #c89b3c; /* ouro Piltover (moldura, detalhe) */ --hx-gold-bright: #f6e3a8; /* highlight metálico do ouro */ --hx-purple: #9b6bf2; /* arcano secundário (magia instável) */ --hx-green: #0bdb6c; /* estado positivo */ --hx-red: #ff3d3d; /* estado negativo */ --hx-orange: #ff8c42; /* aviso */ /* ── SUPERFÍCIES ─────────────────────────────────────────────── Escala de profundidade: deep (fundo da página) → raised (hover). Use sempre a escala, nunca hex solto, para manter contraste. */ --hx-bg-deep: #040608; --hx-bg-base: #080c12; --hx-bg-surface: #0d1420; --hx-bg-card: #0f1623; --hx-bg-raised: #111928; --hx-bg-hover: #172033; /* Vidro (painéis translúcidos sobre arte/fundo animado) */ --hx-glass-bg: rgba(9, 14, 24, 0.82); --hx-glass-border: rgba(0, 229, 255, 0.10); /* ── TINTAS DIM (acento a 12% p/ fundos de chip, ícone, hover) ── */ --hx-cyan-dim: rgba(0, 229, 255, 0.12); --hx-gold-dim: rgba(200, 155, 60, 0.12); --hx-purple-dim: rgba(155, 107, 242, 0.12); --hx-green-dim: rgba(11, 219, 108, 0.12); --hx-red-dim: rgba(255, 61, 61, 0.12); /* ── TEXTO ───────────────────────────────────────────────────── Alto contraste sobre fundo escuro. `accent` é o ciano legível. */ --hx-text-primary: #f2f6fc; --hx-text-secondary: #b4c2d8; --hx-text-muted: #8496b0; --hx-text-accent: #33ecff; --hx-text-inverse: #02131a; /* texto sobre botão ciano sólido */ /* ── BORDAS ──────────────────────────────────────────────────── Escala subtle → strong. Gold para destaque premium/VIP. */ --hx-border-subtle: rgba(0, 217, 255, 0.08); --hx-border-base: rgba(0, 217, 255, 0.14); --hx-border-strong: rgba(0, 229, 255, 0.38); --hx-border-gold: rgba(200, 155, 60, 0.42); /* ── GLOW / SOMBRA ───────────────────────────────────────────── Glows são a assinatura visual Hextech. Use com moderação: 1 elemento "vivo" por região da tela, ou vira poluição. */ --hx-glow-cyan: 0 0 16px rgba(0, 229, 255, 0.40), 0 0 48px rgba(0, 229, 255, 0.14); --hx-glow-cyan-lg:0 0 28px rgba(0, 229, 255, 0.55), 0 0 90px rgba(0, 229, 255, 0.22); --hx-glow-gold: 0 0 14px rgba(200, 155, 60, 0.45), 0 0 40px rgba(200, 155, 60, 0.15); --hx-glow-purple: 0 0 14px rgba(155, 107, 242, 0.40); --hx-glow-text: 0 0 22px rgba(0, 229, 255, 0.45); --hx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40); --hx-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.50); --hx-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.62); /* Sombra composta padrão de cartões: profundidade + 1px de luz interna */ --hx-shadow-card: var(--hx-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04); /* ── TIPOGRAFIA ──────────────────────────────────────────────── display → headlines cinematográficos (peso 700–900) hud → rótulos militares/HUD, sempre uppercase + tracking body → parágrafos e UI mono → dados, números, estatísticas */ --hx-font-display: 'Outfit', 'Inter', sans-serif; --hx-font-hud: 'Barlow Condensed', 'Impact', sans-serif; --hx-font-body: 'Outfit', 'Inter', sans-serif; --hx-font-mono: 'JetBrains Mono', 'Consolas', monospace; /* Escala tipográfica fluida (mobile → desktop sem media query) */ --hx-fs-hero: clamp(2.5rem, 6.2vw, 4.6rem); /* headline do hero */ --hx-fs-title: clamp(1.9rem, 4vw, 3rem); /* título de seção */ --hx-fs-heading: clamp(1.25rem, 2vw, 1.55rem); /* título de cartão */ --hx-fs-lead: clamp(1.05rem, 1.5vw, 1.25rem); /* subheadline/lead */ --hx-fs-body: 1rem; --hx-fs-sm: 0.875rem; --hx-fs-xs: 0.78rem; /* ── ESPAÇAMENTO ─────────────────────────────────────────────── Escala de 4px. Seções usam --hx-space-section (fluido). */ --hx-space-1: 4px; --hx-space-2: 8px; --hx-space-3: 12px; --hx-space-4: 16px; --hx-space-5: 24px; --hx-space-6: 32px; --hx-space-7: 48px; --hx-space-8: 64px; --hx-space-9: 96px; --hx-space-section: clamp(72px, 11vw, 150px); /* respiro vertical entre seções */ /* ── GEOMETRIA ───────────────────────────────────────────────── Cantos discretos: Hextech é lapidado, não "bolha". */ --hx-r-sm: 4px; --hx-r-md: 6px; --hx-r-lg: 10px; --hx-r-xl: 14px; --hx-r-full: 9999px; /* Recorte hexagonal p/ chips e molduras (use com clip-path) */ --hx-clip-hex: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); /* Recorte de canto chanfrado (cartões premium) */ --hx-clip-bevel: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); /* ── MOVIMENTO ───────────────────────────────────────────────── fast → micro-interação | med → hover | slow → entrada de seção */ --hx-t-fast: 0.14s ease; --hx-t-med: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --hx-t-slow: 0.55s cubic-bezier(0.22, 1, 0.36, 1); /* ── LAYOUT ────────────────────────────────────────────────────── */ --hx-container: 1180px; /* largura máx. de conteúdo */ --hx-container-wide: 1360px; --hx-z-nav: 100; --hx-z-modal: 200; }