/* ==========================================================================
   FB WELLNESS — TOKENS
   ========================================================================
   Todos os valores visuais do tema vivem aqui.
   Para customizar por cliente, criar css/tokens-override.css
   sobrescrevendo apenas as variáveis necessárias.
   ========================================================================== */

:root {

  /* ---------- CORES (paleta padrão: terrosa quente) ----------
     Troque apenas as 4 cores base no tokens-override.css do cliente.
     O resto do sistema (estados, neutros) é derivado automaticamente. */

  --fb-color-primary:      #3d5a4a;   /* sage deep — títulos, links, cta */
  --fb-color-accent:       #c96f4a;   /* terracotta — destaques, hover */
  --fb-color-cream:        #f5efe6;   /* cream — fundos de seção */
  --fb-color-charcoal:     #1a1a1a;   /* charcoal — texto principal */

  --fb-color-white:        #ffffff;
  --fb-color-black:        #000000;
  --fb-color-muted:        #6b6b6b;   /* texto secundário */
  --fb-color-border:       #e8e2d6;   /* bordas sutis */

  /* ---------- TIPOGRAFIA ----------
     Display: Fraunces (serif moderno com personalidade).
     Body: Inter (sans clean, alta legibilidade).
     Carregadas via Google Fonts em functions.php. */

  --fb-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --fb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* escala tipográfica (nunca use tamanho fora daqui) */
  --fb-text-xs:   0.75rem;   /* 12px */
  --fb-text-sm:   0.875rem;  /* 14px */
  --fb-text-base: 1rem;      /* 16px */
  --fb-text-lg:   1.25rem;   /* 20px */
  --fb-text-xl:   1.5rem;    /* 24px */
  --fb-text-2xl:  2rem;      /* 32px */
  --fb-text-3xl:  3rem;      /* 48px */
  --fb-text-4xl:  4.5rem;    /* 72px */
  --fb-text-5xl:  6rem;      /* 96px — hero only */

  /* line-height */
  --fb-leading-tight:   1.1;
  --fb-leading-snug:    1.3;
  --fb-leading-normal:  1.5;
  --fb-leading-relaxed: 1.75;

  /* letter-spacing */
  --fb-tracking-tight:  -0.02em;
  --fb-tracking-normal: 0;
  --fb-tracking-wide:   0.05em;

  /* font-weight */
  --fb-weight-regular:  400;
  --fb-weight-medium:   500;
  --fb-weight-semibold: 600;
  --fb-weight-bold:     700;

  /* ---------- SPACING (escala 4px) ---------- */
  --fb-space-1:  0.25rem;  /* 4px */
  --fb-space-2:  0.5rem;   /* 8px */
  --fb-space-3:  0.75rem;  /* 12px */
  --fb-space-4:  1rem;     /* 16px */
  --fb-space-6:  1.5rem;   /* 24px */
  --fb-space-8:  2rem;     /* 32px */
  --fb-space-12: 3rem;     /* 48px */
  --fb-space-16: 4rem;     /* 64px */
  --fb-space-24: 6rem;     /* 96px */
  --fb-space-32: 8rem;     /* 128px */
  --fb-space-48: 12rem;    /* 192px — entre seções grandes */

  /* ---------- BORDER RADIUS ---------- */
  --fb-radius-none: 0;
  --fb-radius-sm:   0.5rem;   /* 8px */
  --fb-radius-md:   1rem;     /* 16px */
  --fb-radius-lg:   1.5rem;   /* 24px */
  --fb-radius-full: 9999px;   /* pill */

  /* ---------- DEPTH (profundidade sem box-shadow clichê) ----------
     Usar preferencialmente gradientes radiais e backdrop-filter.
     Mantemos sombras como fallback sutil. */

  --fb-depth-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --fb-depth-md: 0 4px 16px rgba(26, 26, 26, 0.06);
  --fb-depth-lg: 0 24px 48px rgba(26, 26, 26, 0.08);

  /* gradientes radiais para "luz" ao invés de sombra */
  --fb-glow-cream:  radial-gradient(circle at 30% 20%, rgba(245, 239, 230, 0.6), transparent 60%);
  --fb-glow-accent: radial-gradient(circle at 70% 30%, rgba(201, 111, 74, 0.15), transparent 70%);

  /* ---------- LAYOUT ---------- */
  --fb-container-max:    1280px;
  --fb-container-narrow: 960px;
  --fb-container-prose:  720px;
  --fb-container-gutter: var(--fb-space-6);

  /* ---------- MOTION ---------- */
  --fb-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --fb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fb-duration-fast:   200ms;
  --fb-duration-base:   400ms;
  --fb-duration-slow:   800ms;

  /* ---------- Z-INDEX ---------- */
  --fb-z-base:    1;
  --fb-z-raised:  10;
  --fb-z-sticky:  100;
  --fb-z-overlay: 1000;
  --fb-z-modal:   2000;
  --fb-z-top:     9999;

  /* ---------- BREAKPOINTS (referência — use em container queries ou media queries) ---------- */
  /*  sm:  640px
      md:  768px
      lg:  1024px
      xl:  1280px  */
}

/* ---------- ACCESSIBILITY ----------
   Respeita prefers-reduced-motion desligando durações de animação. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fb-duration-fast: 0ms;
    --fb-duration-base: 0ms;
    --fb-duration-slow: 0ms;
  }
}