/* =========================================================
   ZENFIT CAPS — TOKENS DE DESIGN
   ---------------------------------------------------------
   Paleta extraída por amostragem direta dos assets oficiais
   (rótulo do frasco, faixa de marca e artes dos kits).
     teal    #009B90  — faixa do rótulo e logotipo "ZEN"
     laranja #F28A00  — palavra "Caps"
     âmbar   #F2AD00  — tarjas COM / CONTÉM do rótulo
     menta   #EDFFDD  — fundo das artes de kit
     sálvia  #AFD48D  — marca d'água do símbolo Orvalho
   ========================================================= */

:root {
  /* ---------- Marca ---------- */
  --c-teal:        #009B90;
  --c-teal-dark:   #00726B;
  --c-teal-deep:   #004F4A;
  --c-teal-light:  #1FB8AC;

  --c-orange:      #F28A00;
  --c-orange-dark: #C86F00;

  --c-amber:       #F2AD00;
  --c-amber-dark:  #C58B00;

  --c-sage:        #AFD48D;

  /* ---------- Fundos ---------- */
  --c-ink:      #063733;   /* escuro da marca, não preto neutro */
  --c-ink-2:    #08423D;
  --c-ink-3:    #0C5751;

  --c-paper:    #FFFFFF;
  --c-paper-2:  #EDFAE0;   /* menta das artes de kit */
  --c-paper-3:  #D5E7D0;   /* menta da faixa de marca */
  --c-surface:  #FFFFFF;

  --c-alert:      #D14A2B;
  --c-alert-dark: #A5361C;

  /* ---------- Texto ---------- */
  --t-on-dark:       #F1FAF7;
  --t-on-dark-soft:  rgba(241, 250, 247, 0.74);
  --t-on-light:      #10322E;
  --t-on-light-soft: rgba(16, 50, 46, 0.68);

  /* ---------- Gradientes ---------- */
  --g-cta:    linear-gradient(180deg, var(--c-teal-light) 0%, var(--c-teal) 48%, var(--c-teal-dark) 100%);
  --g-gold:   linear-gradient(180deg, #FFC53D 0%, var(--c-amber) 48%, var(--c-amber-dark) 100%);
  --g-orange: linear-gradient(180deg, #FFA733 0%, var(--c-orange) 48%, var(--c-orange-dark) 100%);
  --g-dark:   linear-gradient(180deg, var(--c-ink) 0%, var(--c-ink-2) 100%);
  --g-hero:   radial-gradient(120% 95% at 72% 30%, #0C5751 0%, var(--c-ink) 64%);

  /* ---------- Tipografia ---------- */
  --f-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  2.875rem;
  --fs-4xl:  3.5rem;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.62;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- Layout ---------- */
  --wrap:        1180px;
  --wrap-narrow: 860px;
  --gutter:      20px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 44px; --s-8: 60px; --s-9: 80px; --s-10: 104px;

  /* 80px entre seções deixava a página com buracos. 64/48 mantém
     a separação legível sem o vazio. */
  --section-y:        68px;
  --section-y-mobile: 48px;

  /* ---------- Bordas e sombras ---------- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  --sh-sm:   0 2px 8px rgba(6, 55, 51, 0.10);
  --sh-md:   0 10px 28px rgba(6, 55, 51, 0.13);
  --sh-lg:   0 22px 54px rgba(6, 55, 51, 0.20);
  --sh-cta:  0 10px 26px rgba(0, 155, 144, 0.40);
  --sh-gold: 0 10px 26px rgba(242, 173, 0, 0.40);

  /* ---------- Movimento ---------- */
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-reveal: 620ms;
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);

  --dur-pulse: 2s;
  --dur-float: 4s;
  --dur-shine: 6s;
}