/* Assessor, painel admin. Tokens do sistema visual.
   Fonte: Outfit (Google Fonts), pesos 300/400/500/600.
   Carregar no <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
*/
:root {
  /* Superfícies */
  --fundo: #000000;
  --cartao: #131313;
  --cartao-2: #1a1a1a;
  --cartao-3: #232323;
  --linha: #2a2a2a;
  --linha-forte: #3a3a3a;

  /* Marca e ação */
  --lima: #E1FB15;
  --lima-escuro: #9fb10c;      /* pontos e hachura sobre lima */
  --lima-suave: color-mix(in srgb, #E1FB15 14%, #131313);
  --verde: #32D583;
  --verde-suave: color-mix(in srgb, #32D583 14%, #131313);
  --alerta: #FDB022;
  --perigo: #FF6B5E;
  --branco: #FFFFFF;

  /* Texto (contraste medido sobre #131313: texto 17:1, suave 8:1, mudo 5.6:1) */
  --texto: #F4F4F4;
  --texto-suave: #BDBDBD;
  --texto-mudo: #9A9A9A;
  --texto-sobre-lima: #0B0B0B;

  /* Gráficos */
  --barra: #1f1f1f;
  --hachura: #5b5b5b;
  --hachura-passo: 5px;
  --ponto: #7f8f08;

  /* Raios */
  --raio-cartao: 28px;
  --raio-interno: 20px;
  --raio-campo: 16px;
  --raio-pilula: 999px;

  /* Espaçamento, múltiplos de 8 */
  --e1: 4px;  --e2: 8px;  --e3: 16px;  --e4: 24px;
  --e5: 32px; --e6: 48px; --e7: 64px;
  --gap-grade: 16px;

  /* Tamanhos de toque e entalhe */
  --toque: 44px;
  --botao-circulo: 40px;
  --entalhe-largura: 96px;     /* 2 botões; use 52px para 1 */
  --entalhe-largura-1: 52px;
  --entalhe-altura: 52px;

  /* Tipografia */
  --fonte: "Outfit", "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-fino: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --t-rotulo: 0.8125rem;       /* 13px */
  --t-corpo: 1rem;             /* 16px */
  --t-titulo-cartao: 1.125rem; /* 18px */
  --t-titulo-tela: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-numero: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --t-numero-g: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);

  /* Movimento */
  --suave: cubic-bezier(.2, .7, .2, 1);
  --t-curto: 160ms;
  --t-medio: 280ms;

  /* Foco por teclado */
  --foco: 0 0 0 2px var(--fundo), 0 0 0 4px var(--lima);

  /* Breakpoints (referência; media queries não aceitam var) */
  /* celular: até 720px | desktop: 1024px+ | alvo de teste: 390 e 1440 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-curto: 0ms; --t-medio: 0ms; }
}

/* Base mínima */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: inherit; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}