/*
 * Tokens do A-Tec. Só propriedades personalizadas.
 * Toda cor deriva das 8 cores do briefing §13 (opacidade via canal alfa #RRGGBBAA).
 * Alfas usados: 08 ≈ 3%, 0D ≈ 5%, 14 ≈ 8%, 1A ≈ 10%, 1F ≈ 12%, 26 ≈ 15%,
 * 40 = 25%, 66 = 40%, B3 = 70%.
 */

:root {
  /* Paleta (briefing §13) */
  --cor-marinho: #05174F;
  --cor-azul: #0B4FCB;
  --cor-azul-medio: #1F78C8;
  --cor-azul-claro: #3AB4F2;
  --cor-cinza: #9BA8B2;
  --cor-branco: #FFFFFF;
  --cor-azul-claro-fb: #0A8BD4;
  --cor-cinza-fb: #75838F;

  /* Tema claro (padrão) */
  --cor-fundo: #FFFFFF;
  --cor-fundo-conteudo: #05174F08;
  --cor-superficie: #FFFFFF;
  --cor-borda: #75838F40;
  --cor-borda-campo: #75838F;
  --cor-texto: #05174F;
  /* Marinho a 70% sobre branco: contraste AA para texto pequeno. Também é a cor dos itens
     inativos ("em breve", desativados); o que os distingue é o selo, o marcador e o cursor.
     #75838F fica só para bordas e divisórias. */
  --cor-texto-secundario: #05174FB3;
  --cor-titulo: #0B4FCB;
  --cor-link: #0B4FCB;
  --cor-acao: #0B4FCB;
  --cor-acao-hover: #05174F;
  --cor-acao-texto: #FFFFFF;
  --cor-foco: #1F78C8;
  --cor-realce: #05174F0D;
  --cor-sombra: #05174F26;

  --cor-barra-fundo: #05174F;
  --cor-barra-texto: #FFFFFF;
  --cor-barra-secundario: #9BA8B2;
  --cor-barra-borda: #9BA8B266;
  --cor-barra-realce: #FFFFFF1A;
  --cor-barra-foco: #3AB4F2;

  --cor-menu-fundo: #FFFFFF;
  --cor-menu-borda: #75838F40;
  --cor-menu-texto: #05174F;
  --cor-menu-realce: #05174F0D;
  --cor-menu-ativo-fundo: #1F78C81F;
  --cor-menu-ativo-texto: #0B4FCB;
  --cor-menu-ativo-borda: #1F78C8;

  --cor-popover-fundo: #FFFFFF;
  --cor-popover-camada: #FFFFFF00;

  --cor-avatar-fundo: #1F78C8;
  --cor-avatar-texto: #FFFFFF;
  --cor-segmento-ativo: #0B4FCB;
  --cor-segmento-ativo-texto: #FFFFFF;
  /* Balão (dica) do trilho: marinho com texto branco. */
  --cor-dica-fundo: #05174F;
  --cor-dica-camada: #FFFFFF00;
  --cor-dica-texto: #FFFFFF;
  --cor-dica-borda: #05174F;
  --cor-placa-logo: #FFFFFF;
  /* Fundo atrás do diálogo modal: marinho a 70% (vale nos dois temas). */
  --cor-dialogo-fundo-externo: #05174FB3;

  --cor-mensagem-erro: #05174F;
  --cor-mensagem-sucesso: #1F78C8;
  --cor-mensagem-info: #75838F;

  /* Gráficos do Dashboard: H/E 50% liso, H/E 100% listrado (a forma distingue, não só a cor). */
  --cor-grafico-50: #0B4FCB;
  --cor-grafico-100: #0A8BD4;
  --cor-grafico-vazio: #75838F;
  --cor-grafico-grade: #75838F40;

  /* Tipografia */
  --fonte-titulo: "Montserrat", "Segoe UI", sans-serif;
  --fonte-corpo: "Roboto", "Segoe UI", sans-serif;

  /* Medidas */
  --barra-altura: 56px;
  --menu-largura: 240px;
  --menu-largura-compacto: 64px;
  --raio: 12px;
  --raio-pequeno: 8px;
  --foco-largura: 3px;
}

[data-tema="escuro"] {
  --cor-fundo: #05174F;
  --cor-fundo-conteudo: #05174F;
  --cor-superficie: #FFFFFF0D;
  --cor-borda: #FFFFFF26;
  --cor-borda-campo: #9BA8B2;
  --cor-texto: #FFFFFF;
  --cor-texto-secundario: #9BA8B2;
  --cor-titulo: #FFFFFF;
  --cor-link: #3AB4F2;
  --cor-acao: #0B4FCB;
  --cor-acao-hover: #1F78C8;
  --cor-acao-texto: #FFFFFF;
  --cor-foco: #3AB4F2;
  --cor-realce: #FFFFFF14;
  --cor-sombra: #05174F;

  --cor-barra-realce: #FFFFFF1A;

  --cor-menu-fundo: #05174F;
  --cor-menu-borda: #FFFFFF1F;
  --cor-menu-texto: #FFFFFF;
  --cor-menu-realce: #FFFFFF0D;
  --cor-menu-ativo-fundo: #FFFFFF14;
  --cor-menu-ativo-texto: #FFFFFF;
  --cor-menu-ativo-borda: #3AB4F2;

  --cor-popover-fundo: #05174F;
  --cor-popover-camada: #FFFFFF14;

  --cor-segmento-ativo: #0B4FCB;
  /* Balão: branco a ~12% sobre marinho, texto branco, borda azul-claro a 40%. */
  --cor-dica-fundo: #05174F;
  --cor-dica-camada: #FFFFFF1F;
  --cor-dica-texto: #FFFFFF;
  --cor-dica-borda: #3AB4F266;

  --cor-mensagem-erro: #FFFFFF;
  --cor-mensagem-sucesso: #3AB4F2;
  --cor-mensagem-info: #9BA8B2;

  --cor-grafico-50: #3AB4F2;
  --cor-grafico-100: #9BA8B2;
  --cor-grafico-vazio: #9BA8B2;
  --cor-grafico-grade: #FFFFFF26;
}