/* ==========================================================================
   tokens.css — design system
   Base off-white, tipografia grafite, laranja como acento pontual da marca.
   ========================================================================== */

:root {
  /* --- Cor ------------------------------------------------------------- */
  --c-papel:        #FAF8F5;  /* fundo base */
  --c-papel-2:      #F3EFE9;  /* faixas alternadas */
  --c-papel-3:      #FFFFFF;  /* cards */
  --c-tinta:        #17171A;  /* titulos */
  --c-tinta-2:      #3B3B42;  /* corpo de texto */
  --c-tinta-3:      #62626C;  /* apoio, legendas */
  --c-linha:        #E4DED5;  /* bordas */
  --c-linha-2:      #D3CABD;  /* bordas em destaque */

  --c-marca:        #BB5316;  /* laranja da marca — 4.81:1 com branco, 4.54:1 sobre papel */
  --c-marca-escura: #9C4514;  /* hover e texto pequeno */
  --c-marca-clara:  #FBEEE3;  /* fundo de selo */

  --c-foco:         #1C5FD0;  /* anel de foco, independente da marca */

  /* --- Tipografia ------------------------------------------------------ */
  --f-titulo: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-xs:   0.8125rem;                              /* 13px */
  --t-sm:   0.9375rem;                              /* 15px */
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-2xl:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --t-3xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

  --lh-apertada: 1.15;
  --lh-titulo:   1.22;
  --lh-texto:    1.7;

  /* --- Ritmo ------------------------------------------------------------ */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.5rem;
  --e-6:  2rem;
  --e-7:  3rem;
  --e-8:  4rem;
  --e-9:  clamp(4rem, 3rem + 5vw, 7rem);   /* respiro entre secoes */

  --largura-max:  76rem;   /* 1216px */
  --largura-leitura: 42rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* --- Forma ------------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --sombra-card: 0 1px 2px rgba(23, 23, 26, 0.04), 0 8px 24px -16px rgba(23, 23, 26, 0.18);
  --sombra-alta: 0 2px 4px rgba(23, 23, 26, 0.05), 0 18px 40px -24px rgba(23, 23, 26, 0.28);

  /* --- Movimento -------------------------------------------------------- */
  --mov-rapido: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --mov-suave:  320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --altura-header: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --mov-rapido: 1ms; --mov-suave: 1ms; }
}