/* ZapBot — Design tokens compartilhados Paleta, tipografia, resets e componentes base reutilizados por todas as páginas do front (landing, login, painel, admin, docs). Depende das fontes Sora/Manrope/JetBrains Mono carregadas via no . */ :root { --bg: #0A0F0D; --bg-alt: #0D1613; --surface: #121C18; --surface-2: #16211C; --border: rgba(237,239,238,0.08); --border-strong: rgba(237,239,238,0.16); --text: #EDEFEE; --text-muted: #9AA39D; --text-faint: #647069; --signal: #2ECC8F; --signal-strong: #3EE39F; --signal-dim: #1B7A57; --tick: #53BDEB; --warn: #F2B84B; --danger: #E0605F; --gold: #B0A06E; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-med: 300ms; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Sora', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg { display: block; } .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; } a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 3px; border-radius: 6px; } .wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--space-4); position: relative; z-index: 1; } @media (min-width: 768px) { .wrap { padding-inline: var(--space-6); } } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 0.94rem; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn-primary { background: linear-gradient(155deg, var(--signal-strong), var(--signal)); color: #04140D; box-shadow: 0 6px 20px -6px rgba(46,204,143,0.6); position: relative; overflow: hidden; } .btn-primary::before { content: ""; position: absolute; top: -40%; left: 0; width: 35%; height: 180%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: translateX(-120%) skewX(-15deg); pointer-events: none; } .btn-primary:hover::before { animation: shine 900ms ease; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(46,204,143,0.75); } .btn-primary:active { transform: translateY(0px) scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface); border-color: var(--signal-dim); } .btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.88rem; } /* ---------- Cartões e superfícies ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); } .tag-pill { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.9rem; font-weight: 500; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .tag-pill:hover { border-color: var(--signal-dim); color: var(--text); background: var(--surface-2); } /* ---------- Keyframes compartilhados ---------- */ @keyframes shine { 0% { transform: translateX(-120%) skewX(-15deg); } 100% { transform: translateX(220%) skewX(-15deg); } } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 4px 18px -4px rgba(46,204,143,0.55); } 50% { box-shadow: 0 4px 26px -2px rgba(46,204,143,0.85); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }