/* ==========================================================================
   ENPRO Jr. - Contratos Automatizados: tokens do design system (T-031, revisto na T-043)
   Cores em HSL "H S% L%" (use hsl(var(--token)) ou hsl(var(--token) / .5)).
   Referencia visual: site da ENPRO Jr. (versao escura): fundo quase preto neutro,
   cards com borda fina, tipografia sobria, azul so na acao principal.
   ========================================================================== */
:root {
  /* marca (cores dos elementos visuais oficiais) */
  --brand-azul: 195 85% 44%;
  --brand-verde: 82 61% 53%;
  --brand-amarelo: 43 96% 49%;
  --brand-vermelho: 0 75% 56%;
  --primaria: var(--brand-azul);
  --cta: #2563eb;
  --cta-hover: #1d4ed8;
  --gradiente-marca: linear-gradient(135deg, hsl(var(--brand-azul)) 0%, hsl(var(--brand-verde)) 50%, hsl(var(--brand-amarelo)) 100%);

  /* superficies e texto: cinzas neutros (sem tom azulado), como no site */
  --fundo: 0 0% 0%;
  --superficie: 0 0% 7%;
  --card: 0 0% 9%;
  --card-alto: 0 0% 11%;
  --texto: 0 0% 95%;
  --texto-suave: 0 0% 62%;
  --texto-sobre-cor: 0 0% 100%; /* texto sobre fundo colorido da marca ou de estado (ex.: faixa vermelha do Gantt) */
  --borda: 0 0% 15%;
  --borda-forte: 0 0% 22%;
  --vidro: hsl(0 0% 7%);
  --sombra-azul: none;
  --sombra-card: 0 1px 2px rgb(0 0 0 / .4);
  --sombra-flutuante: 0 10px 30px rgb(0 0 0 / .5);
  --sombra-lateral: -16px 0 40px -20px rgb(0 0 0 / .7);
  --veu-carregando: rgb(0 0 0 / .6);

  /* estados do checklist e dos badges */
  --verde: var(--brand-verde);
  --amarelo: var(--brand-amarelo);
  --vermelho: var(--brand-vermelho);

  /* series de dados (grafico e heatmap do painel) */
  --dado: var(--brand-azul);
  --dado-barra: hsl(var(--brand-azul) / .7);
  --dado-destaque: hsl(var(--brand-azul));
  --heatmap-1: hsl(var(--brand-azul) / .3);
  --heatmap-2: hsl(var(--brand-azul) / .55);
  --heatmap-3: hsl(var(--brand-azul) / .8);
  --heatmap-4: hsl(var(--brand-azul));

  /* series e categorias do Dashboard (T-061): propostas, fechados, contratos e perdas, em tons discretos; a
     escolha passou no validador de paleta do skill dataviz (vizinhos com diferenca >= 8 em protan e deutan,
     >= 15 na visao normal) e cada cor fica a 3:1 ou mais do cartao e do dia vazio do calendario. Os niveis do
     calendario misturam a cor com a tinta: mais eventos = mais claro no escuro, mais escuro no claro. */
  --serie-propostas: var(--dado);
  --serie-fechados: 149 54% 44%;
  --serie-contratos: 37 59% 40%;
  --serie-perdas: 325 36% 54%;
  --calendario-vazio: var(--card-alto);
  --calendario-tinta: 0 0% 100%;

  /* tipografia (Google Fonts com fallback do sistema); titulos usam a mesma sans do texto */
  --f-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: Inter, "Space Grotesk", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-serif: Fraunces, Georgia, "Times New Roman", serif;

  /* medidas */
  --raio: .375rem;
  --raio-p: .25rem;
  --sidebar: 11.5rem;
  --topo: 3.5rem;
  --anel-foco: 0 0 0 2px hsl(var(--fundo)), 0 0 0 4px var(--cta);
  --transicao: .15s ease;
  --espaco-2: 1rem;
}

/* --------------------------------------------------------------------------
   Tema claro (T-055): os mesmos tokens com valores claros, na mesma hierarquia
   (fundo < superficie; card e card-alto para campos, hover e item ativo).
   Ligado por data-tema="claro" no <html>: js/tema_inicial.js aplica o cache antes
   da pintura e o boot confirma o valor salvo no servidor. A tela de login nao
   carrega esse script e fica sempre escura. Azul de acao/foco e cores da marca
   nao mudam; link e estados usados como texto escurecem para contraste AA (4,5:1).
   -------------------------------------------------------------------------- */
:root[data-tema="claro"] {
  color-scheme: light;
  --primaria: 201 90% 32%;
  --fundo: 0 0% 96%;
  --superficie: 0 0% 100%;
  --card: 0 0% 97%;
  --card-alto: 0 0% 93%;
  --texto: 0 0% 9%;
  --texto-suave: 0 0% 38%;
  --texto-sobre-cor: 0 0% 100%;
  --borda: 0 0% 87%;
  --borda-forte: 0 0% 76%;
  --vidro: hsl(0 0% 100%);
  --sombra-card: 0 1px 2px rgb(0 0 0 / .06);
  --sombra-flutuante: 0 8px 24px rgb(0 0 0 / .12);
  --sombra-lateral: -16px 0 40px -20px rgb(0 0 0 / .2);
  --veu-carregando: hsl(0 0% 96% / .85);
  --verde: 85 62% 27%;
  --amarelo: 38 92% 32%;
  --vermelho: 0 72% 42%;
  /* dados: azul da marca escurecido para 3:1 ou mais sobre o branco (WCAG 1.4.11); rampa do
     heatmap solida, com o nivel 1 ja a 3:1 do dia vazio (card-alto) e cada nivel mais escuro */
  --dado: 195 85% 36%;
  --dado-barra: hsl(195 85% 36%);
  --dado-destaque: hsl(200 90% 26%);
  --heatmap-1: hsl(195 72% 41%);
  --heatmap-2: hsl(197 80% 33%);
  --heatmap-3: hsl(200 86% 26%);
  --heatmap-4: hsl(203 90% 19%);
  /* Dashboard: as mesmas familias, escurecidas para 3:1 no branco; dia vazio branco (com o contorno da grade) */
  --serie-fechados: 150 48% 43%;
  --serie-contratos: 31 61% 41%;
  --serie-perdas: 337 59% 43%;
  --calendario-vazio: 0 0% 100%;
  --calendario-tinta: 0 0% 0%;
}