/* ╔══════════════════════════════════════════════════════════════╗
   ║  variables.css                                                ║
   ║  ───────────────────────────────────────────────────────────  ║
   ║  Design tokens do MycosynX adaptados do funil campeão B3.     ║
   ║  Mantém todos os nomes de tokens do B3 original — só troca    ║
   ║  os valores pra paleta verde do rótulo MycosynX.              ║
   ║                                                                ║
   ║  Cores extraídas do rótulo físico do produto:                 ║
   ║    • Verde escuro do label  → background dark sections        ║
   ║    • Verde brand (logo "X") → CTAs secundários, accents       ║
   ║    • Verde claro brilhante  → highlights, CTA hover           ║
   ║                                                                ║
   ║  CTA principal mantém laranja (proven converter no nicho      ║
   ║  de wellness — alto contraste com o verde).                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {
  /* ────── Paleta principal (MycosynX) ────── */
  --color-page:        #FAFAF7;     /* fundo geral da página */
  --color-cream:       #F5F1EA;     /* fundo alternado de seção */
  --color-water-green: #c8e8d8;     /* verde mint suave (faixas claras) */
  --color-dark-teal:   #1a3a35;     /* verde escuro do label MycosynX (fundo dark) */
  --color-text:        #11302c;     /* texto principal (verde quase preto) */
  --color-text-alt:    #2A2A28;     /* texto alternativo */
  --color-accent:      #1e8769;     /* verde brand (cor do "X" do logo) */
  --color-accent-2:    #2dc890;     /* verde claro vibrante (highlights) */
  --color-cta:         #d77836;     /* laranja CTA — mantido do B3 (alto contraste) */
  --color-cta-hover:   #E67E22;     /* laranja hover */
  --color-pure-white:  #FFFFFF;
  --color-off-white:   #F5F1EA;
  --color-muted:       #C5CBD5;

  /* ────── Tokens legados (compatibilidade c/ regras CSS B3) ────── */
  --color-deep-indigo:    var(--color-text);
  --color-royal-purple:   var(--color-accent);
  --color-soft-lavender:  var(--color-water-green);
  --color-pearl-silver:   var(--color-muted);

  /* ────── Gradientes ────── */
  --gradient-hero:      linear-gradient(135deg, #11302c 0%, #1a3a35 100%);
  --gradient-highlight: linear-gradient(to right, #1e8769, #2dc890);
  --gradient-cta:       linear-gradient(135deg, #E67E22, #d77836);

  /* ────── Tipografia ────── */
  --font-family: "Inter", sans-serif;

  /* ────── Layout ────── */
  --container-width: 1170px;
  --section-padding: 60px 0;

  /* ────── Buttons ────── */
  --btn-bg: var(--color-cta);
  --btn-text: var(--color-pure-white);
  --btn-radius: 6px;

  /* ────── Spacing (4px scale) ────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
}

body {
  background: var(--color-page);
  color: var(--color-text);
}