/* ==========================================================================
   Império Tecnologia — Design tokens
   Cores amostradas do PDF da Império; estrutura (raios, espaçamento,
   superfícies em degrau) herdada da style reference do n8n.
   ========================================================================== */
:root {
  /* ---------- Superfícies (degraus, igual lógica do n8n) ---------- */
  --bg-hero: #000811;          /* fundo do hero / capa (mais escuro) */
  --bg-base: #001823;          /* fundo padrão de TODAS as páginas */
  --bg-panel: #001e2f;         /* painéis laterais / seções alternadas */
  --bg-card-top: #0c2b3f;      /* topo do gradiente dos cards */
  --bg-card-mid: #082437;
  --bg-card-teal-top: #052533; /* card em destaque (tom teal) */
  --bg-card-teal-bot: #001b26;
  --bg-chip: #001620;          /* chips internos sobre painéis */
  --bg-feature-panel: #0a2233; /* Dark Feature Panel (seção 4, item 7) */

  /* ---------- Cores da marca ---------- */
  --teal: #1fb0bc;             /* COR PRINCIPAL — destaques, "SEGURANÇA ELETRÔNICA", eyebrows, ícones */
  --teal-dim: #147a86;
  --blue: #3f7cba;             /* COR SECUNDÁRIA — ícones alternados, labels MISSÃO */
  --icon-bg-teal: #0c384a;     /* fundo da caixinha de ícone teal */
  --icon-bg-blue: #10304a;     /* fundo da caixinha de ícone azul */
  --avatar-bg: #073e49;

  /* Gradiente CTA da Império (substitui o "Ember" do n8n) — azul → teal */
  --grad-cta: linear-gradient(90deg, #3f7cba 0%, #3095bb 50%, #1fb0bc 100%);
  --grad-cta-hover: linear-gradient(90deg, #4a8ac8 0%, #36a2c6 50%, #2bc0cc 100%);
  /* Gradiente de conexão (substitui o "Electric Current") */
  --grad-line: linear-gradient(135deg, #3f7cba, #1fb0bc);
  /* Gradiente dos cards (top → base) */
  --grad-card: linear-gradient(180deg, #0c2b3f 0%, #082437 40%, #001823 100%);
  --grad-card-teal: linear-gradient(180deg, #052533 0%, #001b26 100%);

  /* ---------- Texto ---------- */
  --text-head: #ffffff;        /* títulos */
  --text-body: #b5c6d9;        /* corpo principal */
  --text-soft: #9fb3ca;        /* corpo secundário / descrições de card */
  --text-muted: #7e95af;       /* tags, legendas */
  --text-faint: #5a7081;

  /* ---------- Bordas ---------- */
  --border: rgba(63, 124, 186, 0.18);       /* ≈ #0c2b3f sobre o fundo */
  --border-teal: rgba(31, 176, 188, 0.35);  /* ≈ #0d525f — cards em destaque */
  --border-nav: rgba(63, 124, 186, 0.16);

  /* ---------- Brilho interno (Glowing Inset Card do n8n, em teal) ---------- */
  --glow-inset: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(31,176,188,0.35);
  --glow-teal: 0 0 40px -10px rgba(31,176,188,0.35);

  /* ---------- Tipografia ---------- */
  --font-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-eyebrow: 12px;   /* letter-spacing .22em, uppercase, 700, teal */
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-h4: 20px;
  --text-h3: 24px;
  --text-h2: clamp(34px, 4.2vw, 52px);
  --text-display: clamp(44px, 6vw, 76px);

  /* ---------- Espaçamento (base 8px — n8n) ---------- */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-15: 120px;

  /* ---------- Raios (n8n) ---------- */
  --r-btn: 8px; --r-input: 8px; --r-icon: 10px; --r-node: 12px;
  --r-card: 16px; --r-card-lg: 24px; --r-pill: 9999px;

  /* ---------- Layout ---------- */
  --max-w: 1200px;
  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 32px);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
}