/* ============================================================
   Verso Telecom · SITE-001 · tokens.css
   Fonte de verdade: .opencode/ux/site-001-spec.md (§6 Design System)
   Escrito UMA vez — todas as telas do site-001 reutilizam estes tokens.
   ============================================================ */
:root {
  /* --- Cores da marca (extraídas dos SVGs originais em doc/) --- */
  --verso-blue: #0644A8;        /* cor primária de ação */
  --verso-blue-dark: #003A96;   /* hover do primary */
  --verso-blue-active: #002D7A; /* active do primary */
  --verso-cyan: #08B3EC;        /* acento de tecnologia (sobre navy) */
  --verso-cyan-hover: #27B8F0;
  --verso-cyan-deep: #00A5E1;
  --verso-navy: #04193F;        /* fundo de autoridade */

  /* --- Neutros azulados (coesão com a marca) --- */
  --ink: #12203A;               /* títulos em fundo claro */
  --text: #3D4A63;              /* corpo em fundo claro */
  --muted: #6B7690;             /* labels, legendas */
  --line: #DDE3EE;              /* bordas de cards */
  --line-strong: #C9D4EC;       /* borda em hover de card */
  --surface: #F4F6FB;           /* seções alternadas */
  --chip: #E3ECFB;              /* chips de ícone */
  --navy-text: #C5CFE5;         /* texto secundário sobre navy */
  --navy-text-faint: #8A97B5;   /* barra inferior do footer */
  --success: #178A50;           /* checks de benefício (só gráfico) */
  --error: #C0392B;             /* reserva (site sem formulários) */

  /* --- Gradientes institucionais (uso restrito: detalhes e linhas de 4px) --- */
  --gradient-brand: linear-gradient(135deg, #0644A8 0%, #08B3EC 100%);
  --gradient-line: linear-gradient(90deg, #0644A8 0%, #08B3EC 100%);

  /* --- Tipografia (Inter, fallback de sistema — sem CDN no protótipo) --- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Bordas e sombras --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(4, 25, 63, 0.06);
  --shadow-md: 0 4px 12px rgba(4, 25, 63, 0.10);
  --shadow-lg: 0 12px 32px rgba(4, 25, 63, 0.16);
  --shadow-glow: 0 0 48px rgba(8, 179, 236, 0.22);

  /* --- Layout (alinhado ao wire.css aprovado) --- */
  --container: 1200px;
  --header-h: 64px;
  --section-pad: 64px;
  --gap-card: 24px;

  /* --- Movimento --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --speed-fast: 120ms;
  --speed-med: 240ms;
  --speed-slow: 500ms;
}