/* ==========================================================================
   Joy Figurinhas — Design Tokens
   STATUS: EDIÇÃO 2026 — direção "Tri-color vibrante" (Brand Book brandbook-2026)
   Mobile-first. Público: crianças / jovens adultos. Lindo + funcional.
   Contrastes de texto principais verificados em WCAG 2.1 AA.
   Papéis de cor:
     • base/estrutura → tinta, azul-noite, névoa/branco (âncora)
     • heróis tri-nação (energia, GRÁFICO) → vermelho, azul, verde vívidos
     • ação (CTA) → vermelho-ação (texto branco AA)
     • acento/raridade → amarelo faísca, roxo raro, foil dourado
   Regra de ouro: vermelho/verde/amarelo/foil vívidos são COR-GRÁFICA
   (recebem texto escuro). Texto colorido/botão-branco usa azul, roxo,
   tinta, vermelho-ação ou verde-campo (versão legível).
   ========================================================================== */

:root {
  /* ---- Heróis tri-nação (energia da Copa — uso gráfico/destaque) ---- */
  --c-verm:              #FF3D00;   /* vermelho Copa  (texto escuro por cima) */
  --c-azul-copa:         #304FFF;   /* azul Copa      (aguenta texto branco AA) */
  --c-verde-copa:        #00C752;   /* verde Copa     (texto escuro por cima) */
  --grad-tri: linear-gradient(90deg,
                var(--c-verm) 0 33.33%,
                var(--c-azul-copa) 33.33% 66.66%,
                var(--c-verde-copa) 66.66% 100%);

  /* ---- Cores primárias (âncora da marca) ---- */
  --c-verde-campo:       #0B8A4E;   /* verde legível: preço, kicker (AA) */
  --c-azul-noite:        #0B1B3B;   /* fundo escuro / estrutura / títulos */
  --c-dourado:           #E8B23A;   /* foil / brilhante / premium */

  /* ---- Cores secundárias ---- */
  --c-verde-claro:       #2BC56E;
  --c-azul-ceu:          #304FFF;   /* foco/realce (agora o azul vibrante) */
  --c-areia:             #F6F1E7;

  /* ---- Acento vibrante (energia/celebração — plumagem da arara + Copa) ---- */
  --c-amarelo:           #ECFF43;   /* faísca / highlight (texto escuro) */
  --c-roxo:              #6101EB;   /* raridade topo (aguenta texto branco AAA) */
  --c-azul-arara:        #304FFF;
  --c-verde-vivo:        #00C752;
  --c-ouro-vivo:         #FFC233;

  /* ---- Acento / CTA (ação) ---- */
  --c-cta:               #D42D0C;   /* botão primário + texto branco (AA 5.0) */
  --c-cta-hover:         #B0250A;   /* hover mais fundo (AA) */
  --c-laranja-vivo:      #FF3D00;   /* acento/ícones, usar texto escuro */

  /* ---- Neutros ---- */
  --c-tinta:             #0B0B0F;
  --c-cinza-texto:       #4A5160;
  --c-cinza-borda:       #DDE3EC;
  --c-cinza-fundo:       #F4F6FA;
  --c-branco:            #FFFFFF;

  /* ---- Raridade (sistema colecionável — mapeado na paleta 2026) ---- */
  --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%);
  /* Tiers Legends (faixas de raridade) */
  --c-tier-lilas:        #B387FF;
  --c-tier-bronze:       #C77B3C;
  --c-tier-prata:        #9AA3AF;
  --c-tier-ouro:         #E8B23A;

  /* ---- Semânticas ---- */
  --c-success:           #0B8A4E;
  --c-warning:           #F5A623;
  --c-error:             #C8362F;
  --c-info:              #304FFF;

  /* ---- 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) — um tico mais expressiva no topo
     pra dar impacto/energia sem quebrar o mobile. */
  --fs-h1:   clamp(2.1rem, 1.4rem + 3.4vw, 3.75rem);
  --fs-h2:   clamp(1.65rem, 1.2rem + 2.1vw, 2.6rem);
  --fs-h3:   clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem);
  --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.08;
  --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);

  /* Alvo mínimo de toque (mobile-first, WCAG 2.5.5 / iOS HIG). */
  --tap-min: 44px;

  /* ---- Raio (um tico mais arredondado = mais amigável/jovem) ---- */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ---- Sombra ---- */
  --shadow-sm: 0 1px 2px rgba(11, 27, 59, 0.08);
  --shadow-md: 0 6px 18px rgba(11, 27, 59, 0.12);
  --shadow-lg: 0 16px 40px rgba(11, 27, 59, 0.18);
  --shadow-cta: 0 8px 22px rgba(212, 45, 12, 0.32);

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