/* ==========================================================================
   CotaFácil · Tokens oficiais da marca
   Fonte da verdade: Manual de Marca Franquias CotaFácil (43 pág., franqueadora)
   Extraído e conferido em 23/08/2026. Ver DIRETRIZES-OFICIAIS.md.

   NÃO ALTERE as cores do bloco "marca": elas têm Pantone e existem em material
   impresso. O que estava aqui antes (#FF9800, #FFC107, #4CAF50) era a paleta do
   Material Design do Google, não a da CotaFácil, e ficava a ΔE 16 do laranja real.
   ========================================================================== */

:root{
  /* ---- MARCA (manual, pág. 19) · imutáveis ---- */
  --cf-azul:          #003945;  /* Pantone 548 C · CMYK 96/59/50/52 */
  --cf-laranja:       #f08226;  /* Pantone 151 C · CMYK 0/46/84/6  */
  --cf-laranja-claro: #f49725;  /* Pantone 137 C · CMYK 0/48/90/0  */
  --cf-amarelo:       #fbbb21;  /* Pantone 109 C · CMYK 0/30/90/0  */
  --cf-verde:         #4d9944;  /* Pantone 7739 C · CMYK 73/16/91/2 */
  --cf-branco:        #ffffff;

  /* ---- DEGRADÊ INSTITUCIONAL ----
     O manual trata amarelo, laranja claro e laranja como "3 variantes no degradê".
     Este é o único degradê de marca aprovado. */
  --cf-degrade-quente: linear-gradient(160deg, var(--cf-amarelo), var(--cf-laranja-claro) 45%, var(--cf-laranja));
  --cf-degrade-frio:   linear-gradient(160deg, var(--cf-azul-800), var(--cf-azul));

  /* ---- ESCALA DO AZUL · derivada, para superfícies de interface ----
     Não são cores de marca. Existem porque uma interface precisa de mais de um
     nível de profundidade. Todas mantêm o matiz do azul oficial. */
  --cf-azul-900: #002830;  /* fundo mais profundo · branco 15.6:1 */
  --cf-azul-800: #00303b;  /* fundo de seção      · branco 14.1:1 */
  --cf-azul-600: #1f515b;  /* hover de superfície · branco  8.8:1 */
  --cf-azul-500: #477079;  /* borda sobre escuro  · branco  5.4:1 */
  --cf-azul-100: #e6ebec;  /* superfície suave    · azul   10.5:1 */
  --cf-azul-050: #f7f9f9;  /* fundo de página     · azul   11.9:1 */

  /* ---- NEUTROS · derivados, fora do manual ---- */
  --cf-n900:#0f172a; --cf-n700:#334155; --cf-n500:#64748b;
  --cf-n400:#94a3b8; --cf-n200:#e2e8f0; --cf-n050:#f8fafc;

  /* ---- ESTADOS · fora do manual, necessários em interface ----
     O verde de sucesso é o VERDE DA MARCA, para não inventar um segundo verde. */
  --cf-ok:   #4d9944;  --cf-ok-bg:   #eaf4e8;
  --cf-err:  #c0392b;  --cf-err-bg:  #fdecea;
  --cf-warn: #b4621c;  --cf-warn-bg: #fdf1e3;
  --cf-info: #1f515b;  --cf-info-bg: #e6ebec;

  /* ---- TIPOGRAFIA ----
     Oficial: Galano Grotesque (Bold/SemiBold/Regular). É fonte PAGA e não veio no
     pacote da franqueadora; o cartão de visita que eles entregam usa Poppins.
     Outfit é a geométrica gratuita mais próxima e é a substituta oficial do digital. */
  --cf-ff-titulo: 'Outfit', 'Galano Grotesque', system-ui, sans-serif;
  --cf-ff-texto:  'Inter', system-ui, -apple-system, sans-serif;
  --cf-fw-titulo: 700;  /* equivale ao Galano Bold      */
  --cf-fw-sub:    600;  /* equivale ao Galano Semi Bold */
  --cf-fw-texto:  400;  /* equivale ao Galano Regular   */

  --cf-fs-xs:.78rem; --cf-fs-sm:.9rem;  --cf-fs-base:1rem;
  --cf-fs-lg:1.15rem; --cf-fs-xl:1.5rem; --cf-fs-2xl:2rem; --cf-fs-3xl:2.75rem;
  --cf-lh-tight:1.15; --cf-lh-body:1.65;

  /* ---- ESPAÇO, RAIO, SOMBRA ---- */
  --cf-e1:.25rem; --cf-e2:.5rem; --cf-e3:1rem; --cf-e4:1.5rem; --cf-e5:2.5rem; --cf-e6:4rem;
  --cf-r-sm:.5rem; --cf-r-md:1rem; --cf-r-lg:1.5rem; --cf-r-full:999px;
  --cf-sombra:    0 1px 2px rgba(0,57,69,.08), 0 2px 8px rgba(0,57,69,.06);
  --cf-sombra-lg: 0 4px 12px rgba(0,57,69,.12), 0 12px 32px rgba(0,57,69,.10);
}

/* ==========================================================================
   REGRA DE CONTRASTE DA MARCA · a coisa mais importante deste arquivo

   As três cores quentes da CotaFácil são CLARAS. Texto branco em cima delas
   reprova em acessibilidade, sem exceção:
       branco sobre laranja        2.65:1  ❌
       branco sobre laranja claro  2.26:1  ❌
       branco sobre amarelo        1.72:1  ❌
   O azul-petróleo, ao contrário, passa em todas:
       azul sobre laranja          4.74:1  ✅ AA
       azul sobre laranja claro    5.56:1  ✅ AA
       azul sobre amarelo          7.32:1  ✅ AAA
       azul sobre branco          12.57:1  ✅ AAA
       branco sobre azul          12.57:1  ✅ AAA

   REGRA: sobre quente, texto AZUL. Sobre azul, texto BRANCO. O verde fica em
   3.5:1 nos dois sentidos, então serve para título grande, ícone e elemento de
   UI, nunca para parágrafo.

   EXCEÇÃO DELIBERADA: nas peças de Instagram a franqueadora usa branco sobre
   laranja (ver pág. 20 do manual). Peça é imagem, não conteúdo navegável, e o
   critério WCAG não se aplica do mesmo jeito. Em SITE e INTERFACE, vale a regra
   acima, porque ali o texto é conteúdo real que alguém precisa conseguir ler.
   ========================================================================== */