/* ==========================================================================
   MOBILE STORE — Design Tokens (variáveis da marca)
   --------------------------------------------------------------------------
   Centralize aqui as cores, fontes e medidas. Mexendo só neste arquivo
   você muda a identidade do site inteiro.
   Paleta inspirada na loja: PRETO (dominante) + VERDE (parede de plantas)
   + CINZA (tecnologia).
   ========================================================================== */

:root {
  /* ---- Cores base -------------------------------------------------------- */
  --cor-fundo: #0a0b0a;          /* preto levemente esverdeado (fundo geral) */
  --cor-fundo-2: #101210;        /* superfícies elevadas (cards, barras)     */
  --cor-superficie: #16181604;   /* (não usado diretamente, reservado)       */
  --cor-card: #14161490;         /* cartões com leve translucidez            */
  --cor-linha: rgba(255, 255, 255, 0.08); /* bordas/divisórias sutis         */
  --cor-linha-forte: rgba(255, 255, 255, 0.16);

  /* ---- Texto ------------------------------------------------------------- */
  --cor-texto: #f3f4f1;          /* branco levemente quente                  */
  --cor-texto-dim: #9aa19a;      /* cinza (tecnologia) — textos secundários  */
  --cor-texto-mute: #6b716b;     /* cinza ainda mais discreto                */

  /* ---- Verde da marca (parede de plantas) -------------------------------- */
  --cor-verde: #56a85f;
  --cor-verde-claro: #74cf7e;
  --cor-verde-escuro: #2f5e35;
  --cor-verde-glow: rgba(86, 168, 95, 0.35);
  --cor-verde-soft: rgba(86, 168, 95, 0.12);

  /* ---- WhatsApp ---------------------------------------------------------- */
  --cor-whats: #25d366;
  --cor-whats-escuro: #1da851;

  /* ---- Tipografia -------------------------------------------------------- */
  --fonte-titulo: "Jost", system-ui, sans-serif;     /* combina com a logo   */
  --fonte-texto: "Inter", system-ui, sans-serif;

  /* ---- Medidas / Espaçamento -------------------------------------------- */
  --raio: 18px;
  --raio-sm: 12px;
  --raio-pill: 999px;
  --maxw: 1360px;
  --gap: clamp(14px, 2.4vw, 26px);

  /* ---- Sombras / Brilhos ------------------------------------------------- */
  --sombra: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
  --sombra-verde: 0 0 0 1px var(--cor-verde-soft), 0 18px 60px -24px var(--cor-verde-glow);

  /* ---- Animação ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* "weight" cinematográfico        */
  --t-rapido: 0.25s;
  --t-medio: 0.5s;
  --t-lento: 0.9s;
}