/* ============================================================
   tokens.css — Design tokens (cores, tipografia, espaços, etc.)
   Único arquivo onde "valores brutos" devem viver. Todo o resto
   do CSS consome via var(--token).
   ============================================================ */

:root {
  /* ----- Cores (paleta alinhada ao logo-ep) -----
     --color-brand é teal-cyan #1FA9A2 (matiz ~177°), tirado do
     gradient claro do símbolo do logo. Dark e light derivados
     mantendo o mesmo matiz: ~73% e ~96% de luminosidade. */
  --color-brand:        #1FA9A2;
  --color-brand-dark:   #177B76;
  --color-brand-light:  #E8F5F4;
  --color-ink:          #2C2C2A;
  --color-ink-soft:     #5A5A56;
  --color-ink-mute:     #8A8A85;
  --color-paper:        #FFFFFF;
  --color-paper-soft:   #F8F8F6;
  --color-line:         #E8E8E6;
  --color-whatsapp:     #25D366;

  /* ----- Tipografia ----- */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;

  --lh-tight: 1.15;
  --lh-base:  1.5;
  --lh-loose: 1.75;

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

  /* ----- Espaçamentos (escala 4px) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ----- Layout ----- */
  --container-max:        1280px;
  --container-px:         24px;
  --header-height:        80px;
  --header-height-mobile: 64px;
  --announce-height:      36px;

  /* ----- Bordas, sombras, transições ----- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px  rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* z-index */
  --z-header:        100;
  --z-drawer:        200;
  --z-drawer-scrim:  190;
}

/* Breakpoints (apenas para referência; aplicar via @media):
   mobile   <  768px
   tablet   >= 768px e < 1024px
   desktop  >= 1024px
   wide     >= 1440px */