/* ==========================================================================
   Tokens — identidade visual da Igreja Batista Conectar
   Fonte: brandbook_conectar (paleta, tipografia). Edite só aqui para mudar o tema.
   ========================================================================== */

@font-face {
  font-family: "Noto Serif Italic";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/NotoSerif-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif Italic";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/NotoSerif-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif Italic";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/NotoSerif-SemiBoldItalic.woff2") format("woff2");
}

:root {
  /* Paleta oficial */
  --grafite: #3d3d3b;
  --terracota: #d18f69;
  --salvia: #9eb8b0;
  --salvia-clara: #c2d6d1;
  --creme: #f0ede5;
  --branco: #ffffff;
  --preto: #000000; /* blocos escuros grandes (rodapé, faixa Ofertar): preto puro */

  /* Variações só para TEXTO pequeno (a paleta oficial não alcança contraste AA) */
  --terracota-texto: #9c5a38; /* sobre branco: ≈5:1 */
  --grafite-suave: #66665f; /* texto secundário: ≈5,8:1 sobre branco */

  /* Anel dos stories: mesmas cores do Instagram (não vêm da marca, de propósito) */
  --story-anel: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --story-anel-visto: #c7c7c7;

  /* Papéis semânticos — fundo branco puro; o creme fica só como detalhe */
  --fundo: var(--branco);
  --superficie: var(--branco);
  --texto: var(--grafite);
  --texto-suave: var(--grafite-suave);
  --linha: color-mix(in srgb, var(--grafite) 14%, transparent);

  /* Tipografia */
  /* Helvetica Neue vem instalada nos aparelhos Apple; nos demais cai em Helvetica/Arial */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", sans-serif;
  --font-serif: "Noto Serif Italic", "Noto Serif", Georgia, serif;

  /* Formas */
  --raio-s: 14px;
  --raio-m: 22px;
  --raio-l: 32px;
  --raio-pill: 999px;
  --raio-video: 12px; /* vídeos, capas e miniaturas de mensagens */

  /* Espaço */
  --gutter: 20px;
  --secao: clamp(40px, 9vw, 104px);
  --largura-max: 1200px;

  /* Barras fixas */
  --topbar-h: 60px;
  --tabbar-h: 64px;
  --tabbar-gap: 12px;

  /* Movimento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.28s;

  /* Sombras */
  /* contorno finíssimo + sombra suave: separa os cards brancos do fundo branco */
  --sombra-card: 0 0 0 1px rgb(61 61 59 / 0.08), 0 1px 2px rgb(61 61 59 / 0.05),
    0 10px 28px -14px rgb(61 61 59 / 0.22);
  --sombra-flutuante: 0 10px 30px -10px rgb(61 61 59 / 0.35);
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --topbar-h: 76px;
  }
}