/* Design tokens + fontes — base compartilhada pelo layout autenticado (base.css)
   e pelas telas de autenticação (auth.css).

   Por que um arquivo separado: as duas folhas precisam exatamente da mesma
   paleta e das mesmas @font-face. Duplicar significa que a próxima mudança de
   cor sai pela metade em uma das duas — foi assim que .alert acabou definido
   duas vezes com valores levemente diferentes.

   As fontes são SERVIDAS LOCALMENTE de propósito. O mesmo motivo documentado
   em base.html para o hls.min.js vale aqui: isto roda num appliance dentro de
   um posto de gasolina, sem garantia de internet. Um <link> para o Google
   Fonts significaria texto renderizado em fonte de sistema toda vez que o link
   do posto cair, além de reintroduzir a dependência de terceiro que já foi
   removida uma vez. Só os subsets latin e latin-ext foram baixados (a UI é
   pt-BR; cyrillic/greek/vietnamese seriam 3 arquivos mortos). */

/* ── Inter: interface ─────────────────────────────────────────────────────── */
/* Arquivo variável 400–800: um download cobre regular, medium, semibold e bold. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── JetBrains Mono: placas, logs, CNPJ, IDs ──────────────────────────────── */
/* Escolhida pelo desenho dos glifos ambíguos, não por estética: zero com traço
   interno, I com serifas, l com cauda. Numa tela em que o operador CONFERE uma
   placa lida pelo OCR, 0/O e 1/I/l precisam ser distinguíveis à primeira vista —
   Consolas (a fonte anterior) resolve o zero mas deixa I e l quase idênticos. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Tipografia ── */
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

  /* ── Marca ──
     O verde continua sendo a cor da marca. O que muda é o fundo da página:
     era #f0fdf4 (verde claro), que tingia a tela inteira e fazia o verde dos
     botões perder destaque por competir com o fundo. Agora o fundo é neutro e
     o verde só aparece onde significa alguma coisa. */
  --marca:        #16a34a;
  --marca-forte:  #15803d;
  --marca-escura: #14532d;
  --marca-fraca:  #f0fdf4;
  /* Fundo de HOVER/selecao. --marca-fraca (#f0fdf4) da 1,047:1 contra o branco
     das superficies: e um destaque que nao se ve, muito menos num tablet sob
     luz do dia. Resultado pratico: passar o mouse por um item de menu ou por
     uma linha de tabela nao produzia mudanca perceptivel. #dcf5e5 da 1,152:1
     — ainda discreto, mas visivel — e ainda aceita texto em --marca-escura a
     7,91:1, o que deixa o item apontado MAIS legivel que os vizinhos em vez de
     menos (era o efeito invertido do hover antigo). */
  --marca-hover:  #dcf5e5;
  --marca-borda:  #bbf7d0;
  --marca-texto:  #15803d;

  /* Fundo de BOTAO primario. Separado de --marca de proposito: texto branco
     sobre #16a34a da 3,30:1, abaixo do minimo de 4,5:1 da WCAG AA para texto
     de 14px — e o botao primario e o alvo mais clicado do sistema, lido sob
     luz do dia num tablet. #15803d da 5,02:1 com branco e #126b35 da 6,60:1.
     O #16a34a continua intacto onde nao carrega texto: gradiente do logo,
     anel de foco, bordas, accent-color de checkbox, barra do item ativo. */
  --marca-btn:       #15803d;
  --marca-btn-hover: #126b35;

  /* ── Superfícies ── */
  --bg:         #f4f7f6;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --superficie-3: #f1f5f9;

  /* ── Bordas ── */
  --borda:       #e6ebf0;
  --borda-forte: #d5dde5;

  /* ── Texto ── */
  --texto:   #0f172a;
  --texto-2: #475569;
  /* #94a3b8 (o valor anterior) da 2,56:1 sobre branco: reprova WCAG AA (4,5:1)
     por larga margem, e este token pinta TEXTO que o operador precisa ler —
     cabecalho de tabela, rotulo de KPI, nome do usuario na barra, placeholder,
     estado vazio. #616e80 da 5,18:1 sobre branco e 4,81:1 sobre --bg (o pior
     fundo claro do sistema), continuando um degrau visivel abaixo de --texto-2
     (7,58:1). Para o que e REALMENTE decorativo e nao carrega informacao
     (traco de icone, seta do select) use --traco-mudo. */
  --texto-3: #616e80;
  --traco-mudo: #94a3b8;

  /* ── Semânticas ── */
  --ok:        #15803d;  --ok-bg:    #dcfce7;  --ok-borda:    #bbf7d0;
  --atencao:   #a16207;  --atencao-bg: #fef9c3; --atencao-borda: #fde68a;
  --alerta:    #c2410c;  --alerta-bg: #ffedd5; --alerta-borda: #fed7aa;
  --erro:      #b91c1c;  --erro-bg:  #fee2e2;  --erro-borda:  #fecaca;
  --info:      #1d4ed8;  --info-bg:  #dbeafe;  --info-borda:  #bfdbfe;

  /* ── Painéis escuros ──
     Usados nas áreas de câmera, log e ROI. O resto da UI é claro de propósito:
     o operador usa tablet em campo, sob luz do dia, onde tela escura vira
     espelho. Escuro fica só onde ajuda — atrás de vídeo e de log de terminal,
     que é justamente onde ele também parece um sistema de monitoramento. */
  --painel:        #0d1520;
  --painel-2:      #16202e;
  --painel-3:      #1e2a3a;
  --painel-borda:  rgba(255,255,255,.10);
  --painel-texto:  #e2e8f0;
  --painel-texto-2:#8fa3b8;
  --painel-texto-3:#7c8ca3;
  /* Cores de conteudo do painel escuro. Sao as ultimas que base.css escrevia
     como hex solto, contra a propria regra do cabecalho dele. Medidas sobre
     --painel: aviso 10,98:1, erro 6,63:1 — as duas passam AA. */
  --painel-aviso:  #fbbf24;
  --painel-erro:   #f87171;
  --painel-hover:  #2b3a4d;
  /* Vermelho de "gravando/ao vivo" e da barra de proporcao de falha. E sinal
     visual, nao texto: nunca recebe conteudo por cima. */
  --vivo:       #ef4444;
  --vivo-forte: #dc2626;  /* era #64748b = 3,85:1 sobre --painel; agora 5,36:1 */

  /* ── Elevação ──
     Sombras em duas camadas (contato curto + difusão longa). Uma sombra só,
     como a `0 1px 3px` anterior, achata tudo no mesmo plano. */
  --sombra-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
  --sombra-2: 0 2px 4px rgba(15,23,42,.04), 0 8px 16px -6px rgba(15,23,42,.10);
  --sombra-3: 0 4px 8px rgba(15,23,42,.05), 0 16px 40px -10px rgba(15,23,42,.18);
  --sombra-marca: 0 4px 14px rgba(22,163,74,.30);
  /* Sombra da barra fixa em estado ROLADO. A nav e branca e os cards tambem:
     a borda de 1px em --borda da 1,20:1 contra um card branco, ou seja, ao
     rolar nao ha separacao perceptivel e a barra parece continuar dentro da
     pagina. Esta sombra e o que devolve o plano de cima. */
  --sombra-topbar: 0 1px 0 rgba(15,23,42,.06), 0 4px 16px -4px rgba(15,23,42,.16);

  /* ── Raio ── */
  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-pill: 9999px;

  /* ── Espaçamento ── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* ── Movimento ──
     Curvas rápidas e curtas. Interface de operação: a animação existe para
     confirmar que o clique registrou, não para ser assistida. */
  --t-rapida: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-media:  200ms cubic-bezier(.4, 0, .2, 1);
  --t-saida:  260ms cubic-bezier(.16, 1, .3, 1);
}

/* O atributo `hidden` vale para QUALQUER elemento, inclusive <button>.
   Sem esta linha ele não funcionava em botão nenhum do sistema: o `[hidden] { display:
   none }` que esconde o elemento vem da folha do NAVEGADOR (user-agent), e a folha do
   AUTOR sempre vence a do user-agent — então o `display: inline-flex` de
   `button, .btn` (base.css) mantinha o botão visível com o atributo posto.
   Sintoma real: em Configuração, o botão "Remover" do posto de demonstração aparecia
   antes de existir posto para remover, e `btnRemover.hidden = true` não o escondia —
   clicar chamava `removerPostoFeira()` sobre um posto inexistente.
   Aqui e não em base.css porque `tokens.css` é a única folha que as DUAS bases carregam
   (base.html e auth_base.html), então a regra vale para as telas de login também.
   `!important` para não perder de nenhum `display` de componente — é o mesmo remédio que
   `feira.css` já aplicava, mas lá escopado em `.feira-kiosk`, fora do alcance do painel.
   Vale para <div hidden> por acidente feliz (display:block perde do UA por ordem), mas
   depender disso é o que criou o bug: agora é explícito para todo elemento. */
[hidden] { display: none !important; }

/* Respeita quem desativou animação no sistema operacional. Sem isto, as
   entradas de modal e toast viram um problema real de acessibilidade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}