/* ==========================================================================
   TOKENS — SORVEBOM
   Paleta tirada do próprio produto: magenta da logo, creme de leite,
   casquinha, chocolate e o amarelo de verão.
   ========================================================================== */

:root {
  /* Marca */
  --berry: #C8005A;
  --berry-deep: #9A0045;
  --berry-soft: #FFD6E6;

  /* Produto */
  --milk: #FFF8EF;
  --cream: #F8ECD9;
  --cone: #E9B872;
  --stick: #E7C58F;
  --choco: #3B1D12;
  --choco-soft: #5A3222;
  --sun: #FFC83B;
  --sun-soft: #FFE7A3;

  /* Texto */
  --ink: #2B0D19;
  --ink-body: #5B3A45;
  --ink-muted: #8A6B74;
  --on-dark: #FFF8EF;
  --on-dark-muted: rgba(255, 248, 239, 0.86);

  --line: rgba(43, 13, 25, 0.12);
  --whatsapp: #128C4A;

  /* Tipografia: display arredondado como a logo, texto corrido neutro */
  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --text-hero: clamp(3rem, 1.6rem + 6vw, 6rem);

  /* Ritmo */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 8vw, 7.5rem);
  --radius: 14px;
  --radius-lg: 28px;
  --pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}