/* ==========================================================================
   TOKENS — altere aqui para mudar a identidade visual da página inteira.

   Paleta escura: base preto profundo, faixas em grafite e vinho muito escuro,
   destaque em rubi e textos em branco suave / cinza claro.
   ========================================================================== */

:root {
  /* ---- Fundos (do mais escuro ao mais claro) --------------------------
     Cada seção usa um destes para se separar da vizinha sem quebrar a
     continuidade do preto.                                              */
  --cor-fundo-rodape: #070506;      /* rodapé: o ponto mais escuro       */
  --cor-fundo: #0c0a0b;             /* base da página                    */
  --cor-fundo-cabecalho: #0d0b0d;   /* cabeçalho fixo                    */
  --cor-fundo-grafite: #131114;     /* faixas alternadas                 */

  /* ---- Superfícies elevadas (cards, passos, card de oferta) ---------- */
  --cor-superficie: #161316;        /* sobre o fundo base                */
  --cor-superficie-alta: #1c181c;   /* sobre as faixas de grafite        */

  /* ---- Destaque rubi -------------------------------------------------
     O rubi escuro preenche áreas (botões, círculos); o claro é usado em
     texto e ícones pequenos, onde precisa de contraste sobre o preto.
     O tom de exibição é mais fechado e fica reservado aos números
     grandes, que não precisam clarear tanto para serem legíveis.        */
  --cor-rubi: #941a2d;
  --cor-rubi-medio: #ac2439;
  --cor-rubi-claro: #d06674;
  --cor-rubi-display: #c33c50;
  --cor-rubi-fundo: #2a141b;        /* fundo de pílulas e selos          */

  /* ---- Destaque ouro -------------------------------------------------
     Segundo acento, usado só no plano premium para separá-lo do básico. */
  --cor-ouro: #d9b955;
  --cor-ouro-claro: #f0d98a;
  --cor-ouro-escuro: #c2a038;
  --cor-texto-botao-ouro: #241a06;

  /* ---- Texto ---------------------------------------------------------- */
  --cor-titulo: #f6f1f2;            /* branco suave                      */
  --cor-texto: #e6dee0;             /* corpo sobre superfícies           */
  --cor-texto-suave: #b0a5a9;       /* apoio, legendas                   */
  --cor-texto-claro: #cfc4c8;       /* apoio sobre o vinho escuro        */
  --cor-texto-rodape: #9a9096;
  --cor-texto-botao: #ffffff;

  /* ---- Bordas ---------------------------------------------------------- */
  --cor-borda: #2a2329;
  --cor-borda-suave: #221c21;       /* divisórias internas de listas     */
  --cor-borda-destaque: #3d2a31;    /* bordas em hover                   */

  /* ---- Caixa de aviso -------------------------------------------------- */
  --cor-aviso-fundo: #1b1216;
  --cor-aviso-borda: #3b2830;
  --cor-aviso-texto: #cdbfc4;

  /* ---- Tipografia ---- */
  --fonte-titulo: "Cardo", Georgia, "Times New Roman", serif;
  --fonte-texto: Arial, Helvetica, sans-serif;

  /* ---- Layout ---- */
  --largura-max: 1120px;
  --espaco-lateral: 32px;
  --espaco-secao: 72px;

  /* ---- Bordas arredondadas ---- */
  --raio-pequeno: 12px;
  --raio-medio: 16px;
  --raio-card: 18px;
  --raio-grande: 22px;
  --raio-imagem: 24px;
  --raio-pilula: 999px;

  /* ---- Sombras ----
     No fundo escuro a profundidade vem do preto; o botão ganha um halo
     rubi discreto em vez de sombra neutra.                              */
  --sombra-botao: 0 12px 30px rgba(148, 26, 45, 0.32);
  --sombra-botao-hover: 0 16px 34px rgba(148, 26, 45, 0.45);
  --sombra-botao-ouro: 0 12px 30px rgba(217, 185, 85, 0.18);
  --sombra-botao-ouro-hover: 0 16px 34px rgba(217, 185, 85, 0.26);
  --sombra-destaque: 0 0 0 1px rgba(217, 185, 85, 0.16), 0 24px 60px rgba(0, 0, 0, 0.5);
  --sombra-card: 0 22px 60px rgba(0, 0, 0, 0.55);
  --sombra-card-hover: 0 16px 34px rgba(0, 0, 0, 0.45);
  --sombra-imagem: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* ---- Gradientes ---- */
  --gradiente-destaque: linear-gradient(90deg, var(--cor-rubi), var(--cor-rubi-medio));
  --gradiente-ouro: linear-gradient(90deg, var(--cor-ouro-escuro), var(--cor-ouro-claro));
  --gradiente-fundo: linear-gradient(135deg, #0a0708, #131013);
  --brilho-destaque: rgba(148, 26, 45, 0.24); /* halo do topo da página */

  /* ---- Transições ---- */
  --transicao: 0.2s ease;
}