/* Tokens de design: único lugar onde cores, tipografia, espaçamento e medidas são definidos. */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Cores da marca */
  --navy: #172B46;
  --blue: #315A78;
  --paper: #FCFBF9;
  --white: #FFFFFF;
  --gold: #8D6B33;
  --beige: #FAF7F1;
  --areia: #EDE0C8;                   /* detalhes sobre navy em todo o site (rótulos, links, títulos de rodapé, horários da agenda); substituiu o antigo dourado-champagne em 12/11/2026; 10,9:1 sobre o navy */
  --postit-fundo: #FDFD96;            /* amarelo clássico de post-it: texto navy 13,4:1, referência em azul 6,9:1 */

  /* Papéis (as telas usam estes, não as cores diretamente) */
  --texto: var(--navy);
  --texto-suave: var(--blue);
  --fundo: var(--white);              /* seções alternam entre branco e off-white; o navy só em pontos de contraste */
  --superficie: var(--white);
  --off-white: #F5F7FA;            /* off-white frio (não bege) que alterna com o branco */
  --cinza-suave: #ECEFF3;          /* faixa do topo e fundo dos campos */
  --superficie-alt: var(--off-white);
  --detalhe: var(--gold);          /* títulos pequenos, rótulos e filetes sobre claro */
  --detalhe-escuro: var(--areia); /* detalhes sobre fundo navy */
  --linha: #D5DBE3;                /* filetes decorativos, cinza-azulado (sem cast rosado) */
  --campo-fundo: var(--cinza-suave);
  --campo-linha: var(--blue);      /* traço inferior do campo: mantém a identificação (contraste ≥ 3:1) */
  --controle-borda: var(--blue);   /* bordas de campos e botões (contraste mínimo 3:1) */
  --foco: var(--navy);
  --link: var(--blue);
  --sobre-escuro: #FFFFFF;
  --sobre-escuro-suave: #D6DEE8;
  --fundo-escuro: var(--navy);
  --cor-sede: var(--blue);
  --cor-leste: var(--gold);
  /* A cor da unidade de Moçambique está PENDENTE. */


  /* Tipografia */
  --fonte-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-editorial: "EB Garamond", Georgia, "Times New Roman", serif;
  --fs-base: 1rem;
  --fs-pequeno: 0.875rem;                                  /* 14 px: o mínimo do site */
  --fs-secao: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);    /* 22 a 26 px (EB Garamond; 26 px a partir de ~1000 px de largura) */
  --fs-pagina: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);     /* 28 a 40 px */
  --fs-hero: clamp(2rem, 1.5rem + 2vw, 3rem);              /* até 48 px */
  --lh-texto: 1.6;
  --lh-titulo: 1.2;

  /* Espaçamento (escala única) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --secao-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);          /* respiro vertical de toda seção */

  /* Grade */
  --conteiner-max: 75rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* Medidas */
  --alvo: 2.75rem;      /* 44 px: área mínima de toque */
  --raio: 0.5rem;
  --sombra: 0 1px 2px rgb(23 43 70 / 0.08), 0 4px 12px rgb(23 43 70 / 0.06);
  --altura-faixa: 2.75rem;
  --altura-cabecalho: 4.5rem;
  --altura-cabecalho-compacto: 3.5rem;
}

/* Alto contraste: ativado pelo controle da faixa do topo */
:root[data-contraste="alto"] {
  --navy: #000000;
  --blue: #002B52;
  --paper: #FFFFFF;
  --beige: #FFFFFF;
  --gold: #5A3F0A;
  --linha: #000000;
  --controle-borda: #000000;
  --campo-fundo: #FFFFFF;
  --campo-linha: #000000;
  --off-white: #FFFFFF;
  --cinza-suave: #FFFFFF;
  --sobre-escuro-suave: #FFFFFF;
  --areia: #FFFFFF;
  --postit-fundo: #FFFFFF;
}

/* Texto maior: ativado pelo controle da faixa do topo */
:root[data-texto="grande"] { font-size: 125%; }