/* =====================================================================
   01-tokens.css
   Cores, medidas e tipografia da marca
   Carregado pelo index.html na ordem dos arquivos — a ordem importa
   para a cascata, entao nao troque os <link> de lugar.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  /* ---- Cores da marca, amostradas do arquivo da logo ----
     #254796 = azul principal (o "zul" e a seta)
     #2C3255 = marinho secundário (o "A" e a palavra Empréstimo)
     O resto da escala foi derivado desses dois.                  */
  --marca-azul:    #254796;
  --marca-marinho: #2c3255;

  --azul-900: #101f45;
  --azul-800: #17306a;
  --azul-700: #1d3a80;
  --azul-600: var(--marca-azul);   /* o token da marca E a cor principal */
  --azul-500: #2f58b8;
  --azul-400: #4a74d6;
  --azul-300: #7e9be6;
  --azul-200: #b3c4f0;
  --azul-100: #dde5f9;
  --azul-50:  #f3f6fd;

  --branco: #ffffff;
  --cinza-900: #1a1e35;
  --cinza-700: #454b6b;
  --cinza-500: #5b6180;   /* 5,4:1 no branco — o #6f7590 dava 4,20:1 e reprovava AA */
  --cinza-200: #e4e7f1;

  --zap: #25d366;

  /* ---- Cores das Telas (Banners) ----
     O hex medido em cada banner esta no sidecar (`referencias/banners/*.md`,
     secao "Cores amostradas"). Onde a cor do banner reprovava no AA com
     QUALQUER cor de texto, ela entrou aqui escurecida no mesmo matiz — a
     regra do projeto e "contraste e regra, nao gosto", e o publico e 60+.
     Cada desvio esta comentado na linha. */

  /* Banner: #599cc9. Nesse tom nenhum texto passava AA (branco 2,99:1,
     marinho 4,21:1). Escurecido 14% de luminosidade, mesmo matiz 204deg:
     branco agora da 4,79:1. */
  --tela-portabilidade-bg: #3678a5;
  --tela-portabilidade-txt: #ffffff;
  --tela-portabilidade-dest: #17306a;

  /* Banner: #008efb. Branco dava 3,35:1 e reprovava. Escurecido 8%, mesmo
     matiz 206deg: 4,60:1. Continua azul vivo — o amarelo e o grafite das
     pilulas e que carregam a pegada promocional do banner. */
  --tela-clt-salario-bg: #0077d2;
  --tela-clt-salario-dest: #f8d808;
  --tela-clt-salario-txt: #ffffff;
  /* Grafite dos "baloes" do banner 02. Entrou como token proprio e nao como
     --cinza-900 (#1a1e35): o do banner e cinza neutro, o nosso e marinho
     acinzentado. Familia de cor diferente = token novo, nao desvio de impressao. */
  --tela-clt-salario-cartao: #3a3a3a;

  --tela-clt-trabalhador-bg: #ffffff;
  --tela-clt-trabalhador-dest: #0c3577;
  --tela-clt-trabalhador-apoio: #3c82c7;

  --tela-bpc-loas-bg: #014ab5;
  --tela-bpc-loas-dest: #f8e800;
  --tela-bpc-loas-txt: #ffffff;

  --tela-inss-margem-bg: #112755;
  /* Banner: #001aff. Sobre o marinho #112755 dava 1,69:1 — o fio de identidade
     simplesmente nao aparecia. Clareado para o mesmo azul eletrico visivel
     (3,37:1), que e o minimo para elemento grafico. */
  --tela-inss-margem-vivo: #4d6bff;
  --tela-inss-margem-txt: #ffffff;

  --tela-pj-digital-bg: #0c1e56;
  --tela-pj-digital-cartao: #01a5e2;
  --tela-pj-digital-txt: #7fceec;

  --tela-pj-modernize-bg: #1f2044;
  --tela-pj-modernize-dest: #80c5d4;
  --tela-pj-modernize-txt: #ffffff;

  /* INVERTIDA em 30/07/2026: fundo BRANCO, texto marinho (12,4:1). Da tela 04
     ate a 09 eram seis viewports escuros seguidos, cinco deles com luminancia
     entre .013 e .022 — a pessoa rolava cinco telas achando que a pagina tinha
     travado. O branco esta entre as cores medidas neste banner, e a tela mais
     clara da pagina passou a ser a do consignado, o produto que mais vende. */
  --tela-consignado-108-bg: #ffffff;
  --tela-consignado-108-dest: #00bbe4;
  --tela-consignado-108-txt: #0a326d;
  --tela-consignado-108-marinho: #0a326d;

  --tela-fgts-bg: #00245a;
  --tela-fgts-fundo2: #04366b;
  /* O `fundo2` acima e cor de FUNDO (o corte diagonal), e como fio dava 1,25:1
     sobre o marinho: invisivel. Este e o tom de apoio do mesmo sidecar, para o
     fio (5,69:1). */
  --tela-fgts-apoio: #7ea4c1;
  --tela-fgts-txt: #ffffff;

  --tela-pessoal-bg: #f2f2f2;
  --tela-pessoal-dest: #3cdde6;
  /* O ciano `#3cdde6` foi medido no banner sobre FOTO ESCURA. Sobre o cinza
     gelo desta tela ele da 1,48:1 e desaparece — erro classico de amostrar cor
     de banner sem olhar sobre o que ela estava. Este e o mesmo ciano rebaixado
     para servir de fio (3,46:1); o claro continua no brilho radial, que e
     decoracao e nao precisa passar. */
  --tela-pessoal-dest-escuro: #0e8f9b;
  --tela-pessoal-txt: #2c2946;

  --tela-cartaz-bg: #ffffff;
  --tela-cartaz-azul: #0743aa;
  --tela-cartaz-azul2: #004bc9;

  --tela-consorcio-bg: #0b1d2a;
  --tela-consorcio-ceu: #0e72a0;
  --tela-consorcio-txt: #ffffff;


  --sombra-sm: 0 2px 8px rgba(37, 71, 150, .07);
  --sombra:    0 10px 30px rgba(37, 71, 150, .12);
  --sombra-lg: 0 24px 60px rgba(37, 71, 150, .20);
  --sombra-azul: 0 14px 32px rgba(37, 71, 150, .30);

  --raio-sm: 10px;
  --raio: 16px;
  --raio-lg: 24px;
  --raio-full: 999px;

  --largura: 1160px;
  /* As 12 telas usam duas colunas e fundo sangrado, entao aguentam mais largura
     que as secoes normais. Teto em 1280: acima disso a linha de texto fica larga
     demais e le pior que o espaco vazio nas laterais. */
  --largura-tela: 1280px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);

  --fonte: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Quatro degraus, e so. Antes havia 15 tamanhos diferentes abaixo de
     1.25rem — e e isso que faz uma pagina nao "parecer desenhada".
     O corpo comeca em 18px: piso de legibilidade para publico 60+.        */
  --txt-xs: .9rem;      /* legenda, nota de rodape */
  --txt-sm: 1rem;       /* apoio */
  --txt-md: 1.125rem;   /* corpo */
  --txt-lg: 1.25rem;    /* destaque */

  --transicao: .28s cubic-bezier(.22, .61, .36, 1);
}