/* ==========================================================================
   Joy Figurinhas — Design Tokens
   STATUS: APROVADA (Joyce/Bruno)
   Mobile-first. Contrastes de texto principais verificados em WCAG 2.1 AA.
   Base: brand/assets/palette.css (Brand Book).
   ========================================================================== */

:root {
  /* ---- Cores primárias ---- */
  --c-verde-campo:       #0E7A4B;
  --c-azul-noite:        #0B1B3B;
  --c-dourado:           #E8B23A;

  /* ---- Cores secundárias ---- */
  --c-verde-claro:       #36B37E;
  --c-azul-ceu:          #3E7CB1;
  --c-areia:             #F6F1E7;

  /* ---- Acento / CTA ---- */
  --c-cta:               #C9430F;  /* botão primário + texto branco (AA) */
  --c-cta-hover:         #A83609;
  --c-laranja-vivo:      #F2682C;  /* acento/ícones, usar texto escuro    */

  /* ---- Neutros ---- */
  --c-tinta:             #16181D;
  --c-cinza-texto:       #4A5160;
  --c-cinza-borda:       #D8DCE3;
  --c-cinza-fundo:       #F3F5F8;
  --c-branco:            #FFFFFF;

  /* ---- Raridade ---- */
  --c-rar-comum:         #4A5160;
  --c-rar-prata:         #9AA3AF;
  --c-rar-ouro:          #E8B23A;
  --c-rar-brilhante-a:   #FCE9A8;
  --c-rar-brilhante-b:   #E8B23A;
  --c-rar-brilhante-c:   #B07E1E;
  --grad-brilhante: linear-gradient(135deg,
                      var(--c-rar-brilhante-a) 0%,
                      var(--c-rar-brilhante-b) 45%,
                      var(--c-rar-brilhante-c) 100%);

  /* ---- Semânticas ---- */
  --c-success:           #157A3B;
  --c-warning:           #F5A623;
  --c-error:             #C8362F;
  --c-info:              #1F6FB2;

  /* ---- Tipografia ---- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-code:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Escala (mobile-first, clamp para fluido) */
  --fs-h1:   clamp(2rem, 1.4rem + 3vw, 3.5rem);     /* ~32 -> 56 */
  --fs-h2:   clamp(1.6rem, 1.2rem + 2vw, 2.5rem);   /* ~26 -> 40 */
  --fs-h3:   clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem);
  --fs-h4:   clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-h5:   1.125rem;
  --fs-h6:   1rem;
  --fs-body: 1rem;          /* 16px base */
  --fs-small: 0.875rem;     /* 14px */
  --fs-tiny:  0.75rem;      /* 12px — código, metadados */

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

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* ---- Espaçamento (escala base 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);

  /* ---- Raio ---- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ---- Sombra ---- */
  --shadow-sm: 0 1px 2px rgba(11, 27, 59, 0.08);
  --shadow-md: 0 4px 14px rgba(11, 27, 59, 0.10);
  --shadow-lg: 0 12px 32px rgba(11, 27, 59, 0.16);

  /* ---- Motion ---- */
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}