/* ════════════════════════════════════════════════════════════════════
   Jacob Moda Fitness — tokens do design system
   Fonte: Design System "Jacob Moda Fitness" (claude.ai). Paleta tirada
   do logotipo: cacau (coração), areia (coração interno), névoa (fundo).
   Camadas: primitivos → semânticos. O style.css só usa os semânticos.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitivos ────────────────────────────────────── */
  --cacau-950: #2a1d19;
  --cacau-800: #4a3029;
  --cacau-700: #6e463c;
  --cacau-600: #8e5f52;   /* cor exata do logo */
  --cacau-400: #b48a7d;
  --cacau-100: #f1e7e3;

  --areia-500: #be9f86;
  --areia-400: #d0b7a0;   /* cor exata do logo */
  --areia-200: #e8dacc;
  --areia-100: #f5eee7;

  --nevoa-400: #cfcdd6;
  --nevoa-300: #e3e2e8;   /* cor exata do logo */
  --nevoa-100: #f3f2f6;
  --nevoa-50:  #fafafc;

  --tinta-900: #2b2326;
  --tinta-500: #6f6670;
  --branco:    #ffffff;

  /* ── Semânticos ────────────────────────────────────── */
  --fundo:            var(--nevoa-100);  /* fundo da página */
  --superficie:       var(--branco);     /* cards, header, sheet, sacola */
  --superficie-suave: var(--areia-100);  /* vantagens, obs. de modelagem, frete */
  --destaque:         var(--areia-400);  /* hero e blocos de marca */
  --midia:            var(--nevoa-300);  /* foto carregando / sem foto */
  --fundo-escuro:     var(--cacau-950);  /* footer, faixa de avisos, cookies */

  --texto:            var(--tinta-900);
  --texto-sec:        var(--tinta-500);
  --texto-claro:      var(--nevoa-100);
  --texto-claro-sec:  rgba(243, 242, 246, .68);

  --marca:            var(--cacau-600);  /* ação, preço, ativo */
  --marca-hover:      var(--cacau-700);
  --marca-press:      var(--cacau-800);
  --marca-suave:      var(--cacau-100);  /* fundo de selecionado */
  --marca-linha:      var(--cacau-400);  /* borda de selecionado */
  --acento:           var(--areia-400);  /* ✦ e texto sobre fundo-escuro */

  --borda:            var(--nevoa-300);
  --borda-forte:      var(--nevoa-400);

  --whatsapp:         #25d366;
  --on-whatsapp:      #0b3b1e;           /* branco não passa em contraste */
  --perigo:           #b3261e;
  --overlay:          rgba(42, 29, 25, .52);
  --foco:             var(--cacau-600);

  /* ── Tipografia ────────────────────────────────────── */
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-sans:    'Jost', 'Futura', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Espaço (base 4) ───────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --gutter: var(--space-4);

  /* ── Raios ─────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ── Sombras ───────────────────────────────────────── */
  --sombra-card:   0 1px 2px rgba(43, 35, 38, .06), 0 1px 8px rgba(43, 35, 38, .04);
  --sombra-hover:  0 12px 32px rgba(43, 35, 38, .12);
  --sombra-drawer: -16px 0 48px rgba(42, 29, 25, .18);
  --sombra-fab:    0 8px 24px rgba(42, 29, 25, .22);

  /* ── Movimento ─────────────────────────────────────── */
  --ease: .22s cubic-bezier(.2, .7, .2, 1);

  /* ── Camadas ───────────────────────────────────────── */
  --z-sticky:  100;
  --z-fab:     150;
  --z-overlay: 200;
  --z-sheet:   300;
  --z-aviso:   160;  /* cookies: acima do botão do WhatsApp, abaixo do véu, do sheet e da sacola */
  --z-tela:    500;

  /* ── Layout ────────────────────────────────────────── */
  --container: 1200px;
  --header-h:  60px;
}

@media (min-width: 900px) {
  :root {
    --header-h: 72px;
    --gutter: var(--space-10);
  }
}