/* =============================================================
   MARQUES — TOKENS VISUAIS COMPARTILHADOS
   versao: 1.1.0
   estado: PARA REVISAO VISUAL — nao homologado
   origem: blueprint.bryanjohnson.com (inspecao de estilos computados
           em 22/09/2026, 1440px e 390px)
   guia:   docs/VISUAL_BLUEPRINT.md

   ARQUIVO CANONICO. Nao editar as copias dentro dos projetos.
   Para propagar:  node scripts/sync-tokens.js
   Cada projeto recebe uma COPIA local. Nenhum site carrega o CSS
   de outro — nao existe dependencia de rede entre eles.

   Marcacao de procedencia em cada token:
     [V] valor verificado no codigo da referencia
     [O] caracteristica observada visualmente na referencia
     [A] adaptacao nossa, com motivo declarado
   ============================================================= */

/* ---------- tipografia local ----------
   DM Sans e Montserrat sao as fontes realmente carregadas pela
   referencia [V] e ambas usam SIL Open Font License 1.1, que
   permite uso comercial e hospedagem propria.

   A referencia tambem carrega GTStandard-M (Grilli Type, proprietaria)
   e Font Awesome 5 Pro. Nenhuma das duas e usada aqui: licenca
   incompativel com redistribuicao. Ver assets/fonts/LEIA-ME.md.

   Os arquivos ficam em assets/fonts/, relativo a ESTE arquivo.
   Enquanto nao existirem, o navegador cai na pilha de sistema e a
   pagina continua correta — so perde o desenho exato da fonte. */

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* O 700 entra por um uso so: a letra dos botoes de acao, que precisa ter peso
   de verdade e nao bold sintetico. Os titulos continuam em 400 e 500, como na
   referencia. Sao 14 KB. */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- superficies ----------
     A referencia e uma interface CLARA. O escuro aparece so como
     faixa de destaque, nunca como base. */
  --osso: #f6f4ec;          /* [V] rgb(246,244,236) — fundo da pagina */
  --osso-2: #f1ecde;        /* [V] rgb(241,236,222) — faixa alternada */
  --papel: #ffffff;         /* [V] cartao elevado */
  --pedra: #e1e3e1;         /* [V] rgb(225,227,225) — painel neutro */
  --pedra-2: #d7dad9;       /* [A] segundo nivel de painel, derivado */

  /* ---------- tinta ---------- */
  --tinta: #111c35;         /* [V] rgb(17,28,53) — texto e acao primaria */
  --tinta-2: #1d2c4e;       /* [V] rgb(29,44,78) — hover e faixa escura */
  --tinta-mudo: #5b6880;    /* [A] opaco no lugar de rgba(17,28,53,.45):
                                   45% sobre osso da 3,4:1 e reprova AA.
                                   Este valor da 5,0:1. */
  --fio: rgba(17, 28, 53, 0.13);      /* [A] fio quando inevitavel */
  --fio-forte: rgba(17, 28, 53, 0.22);

  /* ---------- sobre fundo escuro ---------- */
  --osso-sobre-escuro: #f6f4ec;   /* [V] 13,8:1 sobre --tinta */
  --mudo-sobre-escuro: #a9b4c7;   /* [A] 7,2:1 sobre --tinta */
  --fio-sobre-escuro: rgba(246, 244, 236, 0.18);

  /* ---------- acentos ---------- */
  --azul: #4a6aab;          /* [V] rgb(74,106,171) — acento frio */
  --ouro: #7d611f;          /* [A] ouro da marca rebaixado para ler sobre
                                   osso: 5,4:1. O #c6a05c antigo dava 2,3:1
                                   e reprovava como texto. */
  --ouro-luz: #c6a05c;      /* [A] so sobre fundo escuro — 6,2:1 sobre tinta */
  --positivo: #2f6f52;      /* [A] */
  --alerta: #a4443c;        /* [A] */

  /* ---------- tipografia ---------- */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --titulo: "Montserrat", "DM Sans", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Arial, sans-serif;

  /* Escala. A referencia usa 45,6px/28px no h1 e 30px/22px no h2 [V].
     O corpo dela e 14px/12,6px [V]; aqui sobe para 18px/17px [A].
     Dois motivos: o nosso texto carrega condicao contratual em portugues,
     nao nome de produto; e o publico do consorcio em Canarana inclui gente
     com presbiopia que nao vai apertar os olhos para ler prazo e multa.
     Nenhum texto da pagina fica abaixo de 12,5px. */
  --t-titulo-1: clamp(33px, 4.7vw, 58px);
  --t-titulo-2: clamp(28px, 2.9vw, 42px);
  --t-titulo-3: 21px;
  --t-corpo: 18px;
  --t-corpo-2: 16px;
  --t-micro: 14px;
  --t-etiqueta: 12.5px;
  /* Piso absoluto. Nenhuma regra da folha pode declarar tamanho menor que
     este — o portao verifica. */
  --t-minimo: 12.5px;

  --p-leve: 400;            /* [V] titulos da referencia em 400 */
  --p-medio: 500;           /* [V] peso maximo dos titulos dela */
  --p-forte: 700;           /* [A] reservado a numero e botao */

  --lh-titulo: 1.1;         /* [V] ~1,15 a 1,2 */
  --lh-corpo: 1.6;          /* [A] 1,375 da referencia e curto para PT-BR */
  --ls-titulo: -0.018em;    /* [A] a referencia usa 0; ver guia */
  --ls-etiqueta: 0.13em;    /* [V] maiuscula miuda espacada */

  /* ---------- espacamento ----------
     Escala 8. O 72px de secao e verificado na referencia [V]. */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 48px;
  --e-6: 72px;
  --e-7: 96px;

  /* ---------- forma ---------- */
  --raio: 10px;             /* [V] raio dominante dos cartoes */
  --raio-g: 12px;           /* [V] segundo raio */
  --raio-campo: 8px;        /* [A] */
  --raio-pilula: 100px;     /* [V] todos os botoes sao pilula */

  /* ---------- medidas ---------- */
  --largura: 1480px;        /* [V] max-width do container */
  --largura-texto: 780px;   /* [V] coluna de leitura */
  --gutter: 40px;           /* [V] 40px desktop */
  --gutter-mobile: 20px;    /* [V] 20px mobile */

  /* ---------- interacao ---------- */
  --transicao: 180ms cubic-bezier(0.32, 0.72, 0.35, 1);
  --sombra: 0 1px 2px rgba(17, 28, 53, 0.04), 0 8px 24px rgba(17, 28, 53, 0.06);
  --sombra-alta: 0 2px 4px rgba(17, 28, 53, 0.05), 0 16px 40px rgba(17, 28, 53, 0.1);
  --foco: 2px solid var(--tinta);
  --foco-recuo: 3px;
}

@media (max-width: 760px) {
  :root {
    --t-corpo: 17px;
    --gutter: var(--gutter-mobile);
    --e-6: 56px;
    --e-7: 64px;
  }
}