/* Tema do SISSEL: fontes e variáveis (cores, raios, sombras, espaçamentos).
   Único lugar com valores de tema; layout.css e componentes.css só usam as variáveis. */

@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/baloo-2-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/baloo-2-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/baloo-2-latin-700.woff2") format("woff2"); }
/* Inter: textos, tabelas e formulários das telas de trabalho (licença OFL, hospedada localmente) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600.woff2") format("woff2"); }

:root {
  /* Cores do sistema */
  --azul: #12325a;
  --azul-hover: #1f4a7d;
  --ceu: #cfe6f7;
  --foco: #5aa9e6;
  --branco: #fff;
  --texto: var(--azul);
  --texto-suave: rgba(18, 50, 90, 0.72);
  --texto-fraco: rgba(18, 50, 90, 0.6);
  --borda: rgba(18, 50, 90, 0.10);
  --borda-forte: rgba(18, 50, 90, 0.22);
  --divisoria: rgba(18, 50, 90, 0.08);
  --realce: rgba(18, 50, 90, 0.04);
  --realce-forte: rgba(18, 50, 90, 0.08);
  --linha-alternada: #f7fafd;

  /* Cores da logo ETE (etiquetas de categoria e detalhes) */
  --ete-azul: #3e4095;
  --ete-verde: #00a859;
  --ete-amarelo: #fff212;
  --ete-vermelho: #ed3237;

  /* Estados */
  --sucesso: #067647;
  --sucesso-fundo: #ecfdf3;
  --erro: #b42318;
  --erro-fundo: #fef3f2;
  --info-fundo: #eff8ff;

  /* Vidro */
  --vidro-topo: rgba(255, 255, 255, 0.45);
  --vidro-painel: rgba(255, 255, 255, 0.82);
  --vidro-cartao: rgba(255, 255, 255, 0.85);
  --vidro-leve: rgba(255, 255, 255, 0.55);
  --vidro-borda: rgba(255, 255, 255, 0.6);
  --desfoque-topo: blur(16px) saturate(160%);
  --desfoque-painel: blur(20px) saturate(160%);

  /* Raios */
  --raio-p: 12px;
  --raio-m: 16px;
  --raio-g: 24px;
  --raio-pilula: 999px;

  /* Sombras */
  --sombra-topo: 0 4px 20px rgba(18, 50, 90, 0.08);
  --sombra-cartao: 0 2px 10px rgba(18, 50, 90, 0.06);
  --sombra-flutuante: 0 6px 24px rgba(18, 50, 90, 0.15);
  --sombra-painel: -8px 0 32px rgba(18, 50, 90, 0.18);
  --sombra-hover: 0 6px 16px rgba(18, 50, 90, 0.18);

  /* Espaçamentos */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --gutter: clamp(16px, 4vw, 48px);
  --largura-max: 1280px;
  --topo-altura: 77px;   /* atualizado pelo JS com a altura real da barra */
  --faixa-altura: 0px;   /* faixa de implantação (.com-faixa) */

  /* Tipografia */
  --fonte: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-google: Roboto, Arial, sans-serif;
  --fonte-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Telas de trabalho (painel): tipografia e grade */
  --ui-corpo: 14px;
  --ui-tabela: 13px;
  --ui-cabecalho: 12px;
  --ui-titulo: 22px;
  --ui-texto: #1d2b3a;
  --ui-texto-suave: #5b6b7e;
  --ui-fundo: #f5f7fa;
  --grade-borda: #dfe5ec;
  --grade-cabecalho: #f4f6f9;
  --grade-cabecalho-texto: #4a5b70;
  --grade-alternada: #fafbfc;
  --grade-hover: #eef4fb;
  --grade-raio: 8px;
  --grade-linha: 36px;
  --largura-trabalho: 1440px;

  /* Movimento */
  --transicao: .15s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ceu);
  font-family: var(--fonte);
  color: var(--texto);
}
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}