/* ================================================
   DESIGN SYSTEM — TOKENS
   ================================================ */

:root {
  /* ── Cores ── */
  --color-navy:       #1D225E;
  --color-navy-dark:  #0F122E;
  --color-green:      #06FF00;
  --color-lilac:      #E796F8;
  --color-emerald:    #00D35F;
  --color-white:      #FFFFFF;
  --color-off-white:  #F6F6F6;
  --color-gray:       #9699B0;
  --color-gray-light: #E4E5EF;
  --color-text-muted: #5C5E78;

  /* ── Tipografia ── */
  --font-family:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: clamp(44px, 6.5vw, 80px);
  --font-h1:      clamp(30px, 4.5vw, 56px);
  --font-h2:      clamp(22px, 3vw, 36px);
  --font-h3:      clamp(17px, 2vw, 22px);
  --font-body:    16px;
  --font-small:   13px;

  /* ── Espaçamento (grid 8px) ── */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 80px;
  --s8: 96px;
  --s9: 128px;

  /* ── Layout ── */
  --max-width:        1280px;
  --container-px:     24px;
  --header-h:         72px;

  /* ── Radius ── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* ── Sombras ── */
  --shadow-sm: 0 2px 8px rgba(29, 34, 94, 0.07);
  --shadow-md: 0 6px 28px rgba(29, 34, 94, 0.11);
  --shadow-lg: 0 16px 56px rgba(29, 34, 94, 0.18);

  /* ── Transições ── */
  --ease: 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}