/* ==========================================================================
   Lost Packet Web — Tokens de identidade
   --------------------------------------------------------------------------
   Fonte da verdade de cor, tipografia, raio, sombra, espaçamento e motion.
   Regra LP inegociável: nada de hex/px/tempo solto no resto do CSS — sempre
   uma variável daqui. Assim o site inteiro se retema num lugar só.

   As cores foram EXTRAÍDAS do design oficial (prints da landing), por
   amostragem de pixel — não são os valores "genéricos" de partida do manual.
   ========================================================================== */
:root {
  /* — Marca Lost Packet (camada 1: só nos produtos da própria LP) -------- */
  --brand-blue:   #5070FE;  /* azul royal — fundo do hero e o "LOST" do logo  */
  --brand-navy:   #0B091F;  /* navy quase-preto — header sólido, botão, footer */
  --brand-lime:   #CBFB00;  /* verde-limão — pílulas e destaques               */
  --brand-orange: #F5A42A;  /* laranja — setas e detalhes (seções internas)    */
  --white:        #FFFFFF;

  /* — Superfícies (dark-first; escala a partir do navy da marca) ---------- */
  --bg-0: var(--brand-navy);
  --bg-1: #141327;
  --bg-2: #1C1B30;

  /* — Texto -------------------------------------------------------------- */
  --text:       #FFFFFF;
  --text-muted: #DEE4FE;  /* branco levemente azulado — nav sobre o azul royal */
  --text-dim:   #9AA0C4;
  --ink:        #33333D;  /* cinza-escuro p/ corpo de texto em seções CLARAS     */
  --ink-soft:   #5B5B6B;  /* variação mais suave (legendas em fundo claro)       */

  /* — Linhas / foco ------------------------------------------------------ */
  --line:  rgba(255, 255, 255, .14);
  --focus: var(--brand-lime);  /* anel de foco no verde-limão da marca */

  /* — Raios (a assinatura de cantos arredondados) ------------------------ */
  --radius:      12px;   /* botões, cards            */
  --radius-sm:   8px;    /* detalhes menores         */
  --radius-pill: 999px;  /* pílulas e badges         */

  /* — Sombra / elevação -------------------------------------------------- */
  --shadow-header: 0 10px 30px rgba(4, 3, 14, .45);

  /* — Layout ------------------------------------------------------------- */
  /* Conteúdo largo com margens laterais generosas (~74px no desktop), como no
     design. maxw alto serve de teto só em telas muito largas; o gutter é quem
     desenha a margem na maioria dos monitores. */
  --maxw:           1500px;
  --gutter:         clamp(20px, 5.4vw, 76px);
  --header-h:       96px;  /* altura do header no desktop (FIXA — não muda ao rolar) */
  --header-h-mob:   64px;  /* altura no mobile (sempre sólido)              */

  /* — Tipografia (camada 1: Bungee display + Montserrat corpo) ----------- */
  --font-display: "Bungee", system-ui, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* — Motion (sutil e rápido; sempre com escape em reduced-motion) ------- */
  --t-fast: .18s ease;
  --t:      .28s ease;
}