/* tokens.css — Elo Clinic (rebuild do layout do mkt)
   Valores extraídos 1:1 dos estilos inline do bundle. Verde é base. */

:root {
  /* ── Verdes da marca ── */
  --c-dark-2:     #0f2419;  /* verde mais escuro (fundos profundos) */
  --c-dark:       #1a3a27;  /* header, seções escuras, brand dark */
  --c-green-2:    #3d825a;  /* verde médio (texto sobre claro) */
  --c-green:      #4a9e6e;  /* PRIMÁRIO — botões, destaques */
  --c-green-soft: #9fd9b8;  /* verde claro (bordas/acentos sobre escuro) */
  --c-green-100:  #cfeede;
  --c-green-50:   #e8f7ef;  /* fundos suaves */
  --c-green-25:   #f2fbf6;

  /* ── Semânticos ── */
  --c-success:    #22c55e;
  --c-red:        #ef4444;  /* acento/erro */
  --c-red-soft:   #fee2e2;

  /* ── Neutros / texto ── */
  --c-text:       #1e293b;  /* texto principal */
  --c-text-muted: #475569;
  --c-text-soft:  #64748b;
  --c-text-faint: #94a3b8;
  --c-white:      #ffffff;
  --c-slate-50:   #f8fafc;
  --c-slate-100:  #f1f5f9;
  --c-slate-200:  #cbd5e1;

  /* ── Tipografia ── */
  --font-display: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    580;   /* peso dominante dos títulos Fredoka */
  --fw-bold:    700;

  /* Escala de tamanhos (px reais do design) */
  --fs-11:   0.6875rem;
  --fs-13:   0.8125rem;
  --fs-14:   0.875rem;
  --fs-15:   0.9375rem;
  --fs-16:   1rem;       /* base */
  --fs-17:   1.0625rem;
  --fs-18:   1.125rem;
  --fs-20:   1.25rem;
  --fs-22:   1.375rem;
  --fs-24:   1.5rem;
  --fs-26:   1.625rem;
  /* Títulos responsivos (o design era fixo; aqui fica fluido) */
  --fs-h3:   clamp(1.25rem, 1rem + 1.2vw, 1.625rem);   /* ~20→26 */
  --fs-h2:   clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem); /* ~28→46 */
  --fs-h1:   clamp(2.25rem, 1.3rem + 4.2vw, 4rem);     /* ~36→64 */

  /* ── Raios ── */
  --r-sm:   6px;
  --r:      12px;
  --r-md:   16px;    /* dominante */
  --r-lg:   22px;
  --r-xl:   26px;
  --r-pill: 999px;

  /* ── Sombras (verdes, do design) ── */
  --sh-sm:  0 14px 34px rgba(26, 58, 39, 0.07);
  --sh-md:  0 18px 40px rgba(0, 0, 0, 0.10);
  --sh-lg:  0 30px 70px rgba(26, 58, 39, 0.14);
  --sh-green: 0 14px 34px rgba(74, 158, 110, 0.35);
  --ring-green: 0 0 0 10px rgba(74, 158, 110, 0.15);

  /* ── Espaçamento ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Layout ── */
  --container:    1200px;
  --container-wide: 1320px;
  --header-h:     68px;
  --section-py:   clamp(56px, 8vw, 112px);

  /* ── Motion ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.7s;

  /* ── Z-index ── */
  --z-header: 90;
  --z-modal:  100;
}