/*
 * Tokens de design — Prefeitura de Capitão
 *
 * Três camadas, da mais bruta à mais semântica:
 *   1. cores da marca, com os valores exatos do manual de identidade;
 *   2. papéis ("texto", "fundo", "ação"), que é o que os componentes usam;
 *   3. tipografia, espaço e forma.
 *
 * Componentes nunca usam a cor bruta. Isso é o que permite o modo de alto
 * contraste trocar meia dúzia de papéis em vez de reescrever o site.
 *
 * Atenção à acessibilidade: as quatro cores claras da marca (azul claro,
 * verde, amarelo e laranja) NÃO têm contraste suficiente para texto sobre
 * branco. Elas servem de preenchimento e ornamento, com texto escuro por
 * cima. Texto colorido sobre branco usa o azul escuro.
 */

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/kanit-300.woff2") format("woff2");
}

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kanit-400.woff2") format("woff2");
}

@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/kanit-600.woff2") format("woff2");
}

@font-face {
  font-family: "Kanit";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/kanit-600-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/redhattext-300.woff2") format("woff2");
}

@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/redhattext-400.woff2") format("woff2");
}

@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/redhattext-500.woff2") format("woff2");
}

/* Fonte para dislexia: só é baixada quando a pessoa liga a opção no menu de acessibilidade. */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/opendyslexic-400.woff2") format("woff2");
}

@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/opendyslexic-700.woff2") format("woff2");
}

:root {
  /* 1. Marca — valores do manual de identidade 2025–2028 */
  --cor-azul-claro: #31adde;
  --cor-verde: #73c679;
  --cor-amarelo: #e3e036;
  --cor-laranja: #fcb13c;
  --cor-cinza-escuro: #444444;
  --cor-azul-escuro: #354696;
  --cor-bege: #fef7ec;
  --cor-marrom: #6b482f;
  --cor-branco: #ffffff;
  --cor-preto: #000000;

  /* Derivados da marca, para estados e fundos suaves */
  --cor-azul-escuro-700: #28357a;
  --cor-azul-escuro-100: #e9ecf8;
  --cor-azul-claro-100: #e4f4fb;
  --cor-verde-100: #e8f6e9;
  --cor-laranja-100: #fff1d9;
  --cor-cinza-100: #f4f4f4;
  --cor-cinza-200: #e6e6e6;
  --cor-cinza-500: #6b6b6b;
  --cor-tinta: #2b2b2b;

  /* 2. Papéis */
  --c-texto: var(--cor-tinta);
  --c-texto-suave: #555555;
  --c-titulo: var(--cor-azul-escuro);
  --c-fundo: var(--cor-branco);
  --c-fundo-alt: var(--cor-bege);
  --c-fundo-suave: var(--cor-cinza-100);
  --c-borda: var(--cor-cinza-200);
  --c-link: var(--cor-azul-escuro);
  --c-link-hover: var(--cor-azul-escuro-700);
  --c-acao: var(--cor-azul-escuro);
  --c-acao-texto: var(--cor-branco);
  --c-acao-hover: var(--cor-azul-escuro-700);
  --c-destaque: var(--cor-laranja);
  --c-menu-fundo: var(--cor-cinza-escuro);
  --c-menu-texto: var(--cor-branco);
  --c-menu-marca: var(--cor-amarelo);
  --c-rodape-fundo: var(--cor-azul-escuro);
  --c-rodape-texto: #e6e9f6;
  --c-foco: var(--cor-azul-escuro);
  --c-foco-anel: var(--cor-amarelo);
  --c-erro: #b3261e;
  --c-sucesso: #1e6b34;

  /* 3. Tipografia */
  --f-titulo: "Kanit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-corpo: "Red Hat Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fw-titulo: 600;
  --fw-sub: 300;
  --fw-corpo: 300;
  --fw-corpo-forte: 500;

  --fs-pequeno: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-grande: 1.25rem;
  --fs-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-h1: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  --lh-corpo: 1.7;
  --lh-titulo: 1.2;

  /* Espaço */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 1rem;
  --esp-4: 1.5rem;
  --esp-5: 2rem;
  --esp-6: 3rem;
  --esp-7: 4.5rem;

  /* Forma */
  --raio-p: 6px;
  --raio: 12px;
  --raio-g: 20px;
  --sombra-1: 0 1px 3px rgba(40, 53, 122, 0.1);
  --sombra-2: 0 8px 24px rgba(40, 53, 122, 0.14);
  --sombra-3: 0 18px 44px rgba(40, 53, 122, 0.2);
  --transicao: 180ms ease;

  /* Largura */
  --larg-conteudo: 1200px;
  --larg-texto: 72ch;
  --larg-lateral: 300px;
  --altura-menu: 3.25rem;

  /*
   * 4. Nomes do tema antigo, que os plugins do município (Licenças Ambientais,
   * Campeonatos, Defesa Civil) ainda usam nas folhas de estilo deles. Ao
   * defini-los aqui com as cores da marca, os plugins mudam de visual sem que
   * se mexa em uma linha deles. O verde e o azul são tons mais fundos que os da
   * marca, para o texto branco sobre eles passar de 4,5:1.
   */
  --azul-escuro: var(--cor-azul-escuro);
  --azul-escuro-hover: var(--cor-azul-escuro-700);
  --azul-apagado: #6b78b8;
  --azul-apagado-claro: #aab3dc;
  --verde: #2a7d3f;
  --verde-hover: #1e6b34;
  --vermelho: var(--c-erro);
  --branco: var(--cor-branco);
  --preto: var(--cor-tinta);
  --quase-branco: var(--cor-cinza-100);
  --cinza-claro: var(--cor-cinza-200);
  --cinza-medio-claro: #b5b5b5;
  --cinza-medio-escuro: #555555;
  --cinza-escuro: #3d3d3d;
}