/* ============================================================
   Design tokens — "O Tomate que Faz Parte" / Variação B (Vivo)
   Consolida os overrides inline do protótipo (eles vencem o token base).
   ============================================================ */
:root {
  /* ---- Cores ---- */
  --cream: #faf3e3;          /* fundo claro principal / texto sobre escuro */
  --cream-soft: #fdf9ee;     /* cards claros, seções alternadas */
  --cream-deep: #f1e6c9;

  --teal: #1a4d44;           /* verde escuro (cards, acento) */
  --teal-deep: #127166;      /* override real (rgb 18,113,102) — barra topo, kit, universo, footer */
  --teal-mid: #2a6b5f;
  --teal-soft: #d6e3c8;
  --line-dark: #3a5e57;

  --tomato: #cd474b;         /* override real (rgb 205,71,75) — primária / CTA / hero / steps */
  --tomato-deep: #c83a28;    /* sombra empilhada / hover */
  --tomato-bright: #ff6a4d;  /* círculos decorativos */

  --lime: #b6c855;           /* override real (rgb 182,200,85) — kit badge, destaques, italic universo */
  --lime-bg: rgba(182, 200, 85, 0.5); /* fundo seção "Folheie" */

  --amber: #f0a93a;          /* acento amarelo (selos) */
  --amber-deep: #d68a1a;
  --gold: #e0ba1e;           /* override NPS badge (rgb 224,186,30) */

  --ink: #1f2920;
  --line: #e8dcc0;           /* bordas/divisores sobre cream */

  /* ---- Tipografia ---- */
  --font-title: 'Baloo 2', system-ui, -apple-system, sans-serif; /* títulos arredondados (substitui cursive) */
  --font-label: 'Bricolage Grotesque', system-ui, sans-serif;    /* eyebrows, labels, números */
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;        /* corpo, botões */
  --font-italic: 'Fraunces', Georgia, serif;                      /* acentos editoriais itálicos */
  --font-hand: 'Caveat', cursive;                                 /* stickers manuscritos (pontual) */

  /* ---- Espaçamento / layout ---- */
  --pad-x: 64px;             /* padding lateral seções (desktop) */
  --container: 1120px;       /* container central */

  /* ---- Raios ---- */
  --r-card: 18px;
  --r-card-lg: 22px;
  --r-btn: 16px;
  --r-btn-sm: 14px;
  --r-pill: 999px;

  /* ---- Sombras empilhadas ("stacked sticker") ---- */
  --shadow-stack-teal: 0 14px 0 0 var(--teal-deep), 0 24px 40px -16px rgba(0,0,0,.4);
  --shadow-stack-tomato: 0 10px 0 -2px var(--tomato-deep), 0 20px 30px -10px rgba(0,0,0,.4);
  --shadow-card: 0 18px 36px -22px rgba(15,60,52,.45);
  --shadow-float: 0 26px 50px -26px rgba(15,60,52,.5);
}