@charset "utf-8";
/* ==========================================================================
   fgv-tokens.css — Fonte única de verdade do design system ECLASS / FGV
   --------------------------------------------------------------------------
   Trocar uma cor da marca = editar UMA linha aqui.
   NÃO acrescentar cores fora da família azul FGV.
   ========================================================================== */

:root {
  /* ---------- Marca — azuis institucionais ---------- */
  --fgv-navy:           #013d7c; /* ação primária, botão Voltar */
  --fgv-navy-dark:      #0b3460; /* rodapé, contraste alto */
  --fgv-blue:           #003e7e; /* títulos, ênfase */
  --fgv-teal:           #007199; /* hero, faixas de destaque */
  --fgv-cyan:           #008fd3; /* acentos, links, anel de foco */
  --fgv-cyan-light:     #0095cd; /* gradiente, hover secundário */
  --fgv-steel:          #507ba2; /* estados intermediários */
  --fgv-steel-light:    #82a1bd; /* bordas, divisores */

  /* ---------- Superfícies ---------- */
  --fgv-page-bg:        #f7f8f9;
  --fgv-hero-bg:        #e6eaee; /* faixa do título — cinza um passo abaixo do
                                    fundo da página, para separar as três zonas:
                                    header branco / hero cinza / conteúdo claro */
  --fgv-white:          #ffffff;
  --fgv-surface:        #e9eaeb;
  --fgv-surface-alt:    #e9edf0;
  --fgv-surface-hover:  #dff4ff;
  --fgv-border:         #dfdfe3;
  --fgv-border-strong:  #c3cdd8;

  /* ---------- Texto ---------- */
  --fgv-ink:            #4c4c4c;
  --fgv-ink-soft:       #545454;
  --fgv-ink-muted:      #6b7280;
  --fgv-on-dark:        #ffffff;
  --fgv-on-dark-soft:   #e8f5fb; /* texto de apoio sobre azul escuro (rodapé, spotlight) */

  /* ---------- Gradientes institucionais ----------
     Só a família azul→ciano. Nada de roxo, rosa, verde-limão ou laranja neon. */

  /* NÃO ESTÁ EM USO. Era o fundo do .fgv-hero, que virou fundo claro com um
     filete embaixo — a faixa colorida em toda página pesava demais e competia
     com o .fgv-spotlight. Mantido como referência da marca, mas ATENÇÃO: ele vai
     até o ciano #008fd3, onde texto branco dá só 3,58:1 (mínimo 4,5:1). Se for
     reaproveitar com texto branco por cima, use --fgv-gradient-spotlight. */
  --fgv-gradient-hero:  linear-gradient(135deg, #013d7c 0%, #007199 60%, #008fd3 100%);

  /* Cabeçalho de grupo do accordion. */
  --fgv-gradient-band:  linear-gradient(90deg, #013d7c 0%, #007199 100%);

  /* Gradiente do .fgv-spotlight (destaque de recurso novo). Vai só até o teal,
     de propósito: branco sobre o ciano #008fd3 dá 3,58:1, abaixo do mínimo de
     4,5:1. Nas três paradas deste gradiente o branco fica entre 5,5:1 e 10,7:1.
     O ciano entra como brilho decorativo no canto, longe do texto. */
  --fgv-gradient-spotlight: linear-gradient(115deg, #013d7c 0%, #00538f 50%, #007199 100%);

  /* ---------- Cor por categoria do hub (ajuda.html) ----------
     Um matiz suave por plataforma, para a pessoa reconhecer a seção de relance.
     Usados em POUCOS lugares de propósito — ícone e título do grupo, fundo do
     badge do cartão e borda no hover. Os cartões continuam brancos, então a
     página segue branca e azul; a cor é sinal, não decoração.

     Todos os quatro passam com folga no contraste sobre o fundo #f7f8f9
     (mínimo WCAG 4,5:1) e com branco por cima (etiquetas e badge em hover). */
  --fgv-cat-eclass:        #00618f;  /* azul FGV      — 6,4:1 */
  --fgv-cat-eclass-soft:   #e7f2f8;
  --fgv-cat-teams:         #5a5fa8;  /* índigo        — 5,4:1 */
  --fgv-cat-teams-soft:    #eceef7;
  --fgv-cat-zoom:          #0d7a6b;  /* verde-petróleo — 4,9:1 */
  --fgv-cat-zoom-soft:     #e6f3f0;
  --fgv-cat-office:        #8a6520;  /* ocre           — 5,0:1 */
  --fgv-cat-office-soft:   #f6f0e4;

  /* ---------- Espaçamento ---------- */
  --fgv-space-1: 0.25rem;
  --fgv-space-2: 0.5rem;
  --fgv-space-3: 0.75rem;
  --fgv-space-4: 1rem;
  --fgv-space-5: 1.5rem;
  --fgv-space-6: 2rem;
  --fgv-space-7: 3rem;
  --fgv-space-8: 4rem;

  /* ---------- Raios ---------- */
  --fgv-radius-sm: 4px;
  --fgv-radius-md: 8px;
  --fgv-radius-lg: 14px;
  --fgv-radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --fgv-shadow-sm: 0 1px 2px rgba(1, 61, 124, 0.08), 0 1px 3px rgba(1, 61, 124, 0.06);
  --fgv-shadow-md: 0 4px 10px rgba(1, 61, 124, 0.10), 0 2px 4px rgba(1, 61, 124, 0.06);
  --fgv-shadow-lg: 0 12px 28px rgba(1, 61, 124, 0.16), 0 4px 10px rgba(1, 61, 124, 0.08);

  /* ---------- Movimento ---------- */
  --fgv-dur-fast: 150ms;
  --fgv-dur:      200ms;
  --fgv-dur-slow: 250ms;
  --fgv-ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --fgv-container: 72rem;   /* 1152px — teto de largura do conteúdo */
  --fgv-gutter:    1.25rem;
  --fgv-tap:       44px;    /* alvo mínimo de toque */

  /* ---------- Tipografia ---------- */
  --fgv-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fgv-text-xs:   0.8125rem;
  --fgv-text-sm:   0.875rem;
  --fgv-text-base: 1rem;
  --fgv-text-lg:   1.125rem;
  --fgv-text-xl:   1.375rem;
  --fgv-text-2xl:  1.625rem;
  --fgv-text-3xl:  2rem;
  --fgv-leading:   1.6;

  /* ---------- Foco ---------- */
  --fgv-focus-ring: 2px solid var(--fgv-cyan);
  --fgv-focus-offset: 2px;
}