/* =====================================================================
   Tokens de design da SMN — fonte única de cores, tipografia, raios,
   sombras e tempos. Valores brutos ficam só aqui; o resto usa var(--smn-*).
   ===================================================================== */

:root {
  /* --- superfícies -------------------------------------------------- */
  --smn-fundo: #1a1a32;
  --smn-fundo-topo: #1c1c37;
  --smn-fundo-base: #191930;
  --smn-fundo-trilho: #16162b;
  --smn-superficie: #20203d;
  --smn-superficie-alt: #1b1b35;
  --smn-painel: #26264a;
  --smn-painel-alt: #2d2d54;
  --smn-nav: rgba(28, 28, 55, .72);
  --smn-menu: rgba(24, 24, 45, .96);
  --smn-selo: rgba(45, 45, 84, .9);
  --smn-seta: rgba(22, 22, 43, .55);

  /* Faixas cinza da Home e do rodapé. */
  --smn-cinza: #364141;
  --smn-cinza-escuro: #283131;
  --smn-cinza-card: #2e3737;

  /* --- marca --------------------------------------------------------- */
  --smn-verde: #49b176;
  --smn-verde-hover: #5cc389;
  --smn-verde-link: #6fce97;
  --smn-verde-suave: #8fe0b1;
  --smn-verde-rodape: #c7f0d8;
  --smn-sobre-verde: #0c2418;

  /* Canais RGB dos tons recorrentes: as transparências são muitas, então
     derivam daqui em vez de virar um token cada. */
  --smn-verde-rgb: 73, 177, 118;
  --smn-branco-rgb: 255, 255, 255;
  --smn-texto-rgb: 209, 219, 218;
  --smn-preto-rgb: 0, 0, 0;

  /* --- texto --------------------------------------------------------- */
  --smn-branco: #fff;
  --smn-txt: #e7ecec;
  --smn-txt-forte: rgba(var(--smn-texto-rgb), .78);
  --smn-txt-medio: rgba(var(--smn-texto-rgb), .72);
  --smn-txt-fraco: rgba(var(--smn-texto-rgb), .62);
  --smn-txt-tenue: rgba(var(--smn-texto-rgb), .5);
  --smn-txt-apagado: rgba(var(--smn-texto-rgb), .45);
  --smn-erro: #ff9d8a;

  /* --- bordas e véus -------------------------------------------------- */
  --smn-linha: rgba(var(--smn-branco-rgb), .09);
  --smn-linha-fraca: rgba(var(--smn-branco-rgb), .08);
  --smn-linha-forte: rgba(var(--smn-branco-rgb), .12);
  --smn-superficie-veu: rgba(var(--smn-branco-rgb), .04);
  --smn-superficie-veu-fraco: rgba(var(--smn-branco-rgb), .03);
  --smn-campo-fundo: rgba(var(--smn-preto-rgb), .22);
  --smn-verde-veu: rgba(var(--smn-verde-rgb), .12);
  --smn-verde-veu-forte: rgba(var(--smn-verde-rgb), .14);
  --smn-verde-borda: rgba(var(--smn-verde-rgb), .3);
  --smn-verde-borda-forte: rgba(var(--smn-verde-rgb), .4);

  /* --- tipografia ----------------------------------------------------- */
  /* A família de texto vai sem alternativa de propósito: glifos que faltam na
     Manrope, como a seta →, caem na fonte padrão do navegador, e é ela que os
     desenha no design original. Declarar system-ui aqui trocaria esse desenho.
     O corpo da página tem o stack completo, em base.css. */
  --smn-fonte-texto: "Manrope";
  --smn-fonte-titulo: "Poppins", sans-serif;
  --smn-fonte-mono: "JetBrains Mono", monospace;

  --smn-h1-home: clamp(38px, 8.2vw, 68px);
  --smn-h1-pagina: clamp(32px, 6.4vw, 52px);
  --smn-h2: clamp(28px, 5.2vw, 40px);
  --smn-h2-cta: clamp(27px, 5vw, 38px);
  --smn-lead: clamp(16px, 2.6vw, 19px);

  --smn-trilha-titulo: -.01em;
  --smn-trilha-h2: -.005em;
  --smn-trilha-kicker: .28em;
  --smn-trilha-selo: .2em;
  --smn-trilha-rotulo: .16em;

  /* --- raios ----------------------------------------------------------- */
  --smn-raio-botao: 11px;
  --smn-raio-botao-g: 13px;
  --smn-raio-chip: 12px;
  --smn-raio-card: 16px;
  --smn-raio-card-g: 18px;
  --smn-raio-painel: 20px;
  --smn-raio-painel-g: 24px;
  --smn-raio-pill: 100px;

  /* --- sombras --------------------------------------------------------- */
  --smn-sombra-nav: 0 12px 40px -18px rgba(var(--smn-preto-rgb), .6);
  --smn-sombra-menu: 0 24px 60px -20px rgba(var(--smn-preto-rgb), .7);
  --smn-sombra-selo: 0 16px 40px -16px rgba(var(--smn-preto-rgb), .6);
  --smn-sombra-verde: 0 14px 34px -10px rgba(var(--smn-verde-rgb), .6);

  /* --- movimento -------------------------------------------------------- */
  --smn-mov: cubic-bezier(.2, .7, .2, 1);
  --smn-t-hover: .3s;

  /* Amplitude dos brilhos de fundo. O pulso vai da opacidade minima a maxima
     enquanto cresce ate a escala; a deriva e o quanto a massa passeia. */
  --smn-brilho-min: .45;
  --smn-brilho-max: 1;
  --smn-brilho-escala: 1.22;
  --smn-brilho-deriva-x: 18px;
  --smn-brilho-deriva-y: 32px;

  /* --- medidas ----------------------------------------------------------- */
  --smn-container: 1180px;
  --smn-container-nav: 1240px;
}

/* Respiro lateral em tablet e mobile. No desktop --gutter não existe e cada
   seção usa o próprio fallback, então nada muda lá. */
@media (max-width: 1024px) {
  :root { --gutter: 40px; }
}

@media (max-width: 640px) {
  :root { --gutter: 32px; }
}