/* ============================================================
   DESIGN TOKENS — Eliane Souza Naturopata
============================================================ */
:root {
  /* Tipografia */
  --font-jakarta: 'Plus Jakarta Sans', sans-serif;
  --font-script:  'Great Vibes', cursive;

  --text-xs:   clamp(11px, 1.5vw, 12px);
  --text-sm:   clamp(13px, 1.8vw, 14px);
  --text-base: clamp(15px, 2vw,   16px);
  --text-lg:   clamp(17px, 2.2vw, 18px);
  --text-xl:   clamp(19px, 2.5vw, 20px);
  --text-2xl:  clamp(22px, 3vw,   24px);
  --text-3xl:  clamp(26px, 3.5vw, 30px);
  --text-4xl:  clamp(32px, 4.5vw, 40px);
  --text-5xl:  clamp(44px, 6vw,   56px);
  --text-hero: clamp(52px, 7.5vw, 80px);

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;

  /* Cores — Brand Verde */
  --color-green:       #1A2E28;
  --color-green-dark:  #111F1B;
  --color-green-mid:   #2D4A3E;
  --color-green-light: #4A7060;
  --color-green-bg:    #EBF0EC;
  --color-green-tint:  rgba(26, 46, 40, 0.07);

  /* Cores — Fundo */
  --color-cream:       #F8FAF9;
  --color-cream-dark:  #EEF2F0;
  --color-offwhite:    #FFFFFF;
  --color-white:       #FFFFFF;
  --color-bg-soft:     #EBF0EC;

  /* Cores — Texto */
  --color-text-primary: #1A2E28;
  --color-text-medium:  #3D5C50;
  --color-text-muted:   #6B8C80;

  /* Cores — UI */
  --color-border:   #C8D8D2;
  --color-whatsapp: #25D366;
  --color-error:    #C0392B;

  /* Espaçamento */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* Sombras */
  --shadow-sm:    0 1px 3px rgba(26,46,40,0.08), 0 1px 2px rgba(26,46,40,0.05);
  --shadow-md:    0 4px 16px rgba(26,46,40,0.10), 0 2px 6px rgba(26,46,40,0.06);
  --shadow-lg:    0 10px 32px rgba(26,46,40,0.12), 0 4px 12px rgba(26,46,40,0.08);
  --shadow-xl:    0 20px 60px rgba(26,46,40,0.15);
  --shadow-green: 0 8px 24px rgba(26,46,40,0.28);

  /* Motion */
  --ease-default: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-smooth:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-snappy:  cubic-bezier(0.165, 0.84, 0.44, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* Grid */
  --grid-gap:    clamp(16px, 2vw, 24px);
  --grid-margin: clamp(20px, 5vw, 80px);
  --max-w:       1200px;
}