/* ==========================================================================
   tokens.css — cópia íntegra do :root do DS `docs/marketing/02-DS-PAGINA.md` v2.0
   Fonte única de tokens. Divergência com o DS = dívida a quitar (não editar aqui
   sem atualizar o contrato). Sessão S1 da frente Refatoração da Página de Vendas.
   ========================================================================== */

:root {
  /* ── Cores da Marca (Brand) ── */
  --brand-blue: #2E6BE6;
  --brand-blue-hover: #1D58CD;
  --brand-dark: #0A0E1A;
  --brand-surface: #141C26;

  /* ── Ação / Conversão (Exclusivo para CTAs) ── */
  --cta-orange: #E85D04;
  --cta-orange-hover: #FF7A2F;
  --cta-orange-active: #D05103;

  /* ── Seções Claras (Light Sections — Leitura Longa) ── */
  --bg-light: #F8FAFC;
  --surface-light: #FFFFFF;
  --border-light: #E2E8F0;
  --tx-1-light: #0F172A;
  --tx-2-light: #334155;
  --tx-3-light: #64748B;

  /* ── Seções Escuras (Dark Sections — Hero, Fechamento, Cards Code) ── */
  --bg-dark: #0A0E1A;
  --surface-dark: #141C26;
  --surface-dark-2: #1E2A38;
  --border-dark: #2A384A;
  --tx-1-dark: #F8FAFC;
  --tx-2-dark: #94A3B8;
  --tx-3-dark: #64748B;

  /* ── Cores Semânticas / Estados ── */
  --ok: #10B981;
  --ok-bg: rgba(16, 185, 129, 0.1);
  --warn: #F59E0B;
  --warn-bg: rgba(245, 158, 11, 0.1);
  --err: #EF4444;
  --err-bg: rgba(239, 68, 68, 0.1);
  --info: #3B82F6;

  /* ── Tipografia (Escala Modular) ── */
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', 'Fira Code', monospace;

  --f-h1: clamp(32px, 5vw, 52px);
  --f-h2: clamp(26px, 3.5vw, 38px);
  --f-h3: clamp(20px, 2.5vw, 26px);
  --f-body: 16px;
  --f-body-lg: 18px;
  --f-sm: 14px;
  --f-xs: 12px;

  /* ── Espaçamento (Escala 4px/8px) ── */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-120: 120px;

  /* ── Bordas e Sombras ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 32px rgba(10,14,26,0.15);
  --shadow-dark: 0 12px 32px rgba(0,0,0,0.4);

  /* ── Tema Claro VC — Versão Clara do site (v2.0) ── */
  --vc-bg: #F4F7FB;
  --vc-hero-a: #E9EFFA;
  --vc-hero-b: #F8FAFC;
  --vc-surface: #FFFFFF;
  --vc-surface-2: #EDF1F8;
  --vc-border: #DCE4F0;
  --vc-border-strong: #B9C6DA;
  --vc-grid-line: rgba(46,107,230,.07);

  /* ── Tratamento de fotografia industrial (v2.0) ── */
  --img-overlay: linear-gradient(180deg, rgba(10,14,26,.35) 0%, rgba(10,14,26,.82) 100%);
  --img-overlay-lateral: linear-gradient(90deg, rgba(10,14,26,.88) 0%, rgba(10,14,26,.25) 65%, rgba(10,14,26,.05) 100%);
  --img-filter: saturate(.78) contrast(1.06) brightness(.92);

  /* ── Transições e Layout ── */
  --t: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 1200px;
  --header-h: 72px;
}