/* ============================================================
   NavSupply Coletor — tokens.css (rebranding NavSupply, camada 1, 28/10/2026)

   O KIT é a fonte da verdade: static/navsupply-ui/tokens.css (cópia fiel do
   NAVQUOTE, nomes em português: --papel, --folha, --tinta, --ouro, --navy...)
   é carregado ANTES deste arquivo em index.html, cotacao.html e dev-ui.html.
   Aqui ficam os NOMES do Coletor (--bg, --surface, --fg, --action, --danger...)
   apontando para os tokens do kit — nenhuma classe e nenhuma marcação mudou —
   e só os valores que o kit não tem (marcados "próprio", com a conta de
   contraste ao lado). style.css e ui.css continuam só com var(--token).

   NÃO redeclare aqui um nome que o kit já define (--navy, --ok, --info,
   --linha, --hover...): var(--ok) dentro de --ok vira ciclo e o token inteiro
   some (guaranteed-invalid). Onde o Coletor e o kit usam o mesmo nome com o
   mesmo sentido, vale o do kit.

   Tema escuro: o kit redefine os seus tokens em
   @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) e em
   :root[data-theme="dark"]. app.js (aplicaTema) resolve "auto" e grava
   data-theme ("light"/"dark") E data-tema ("claro"/"escuro") na raiz (e
   tema-boot.js, no <head>, faz o mesmo ANTES do primeiro paint). Os
   tokens PRÓPRIOS do Coletor que mudam de valor entre os temas estão no fim
   deste arquivo, com os mesmos dois seletores do kit (escuro NAVY do kit,
   que substitui o cinza #171717 pedido em 22/09/2026 — decisão do rebranding).

   Contraste: fórmula WCAG 2 (luminância relativa). Meta: 4,5:1 texto normal,
   3:1 texto grande (>=20px) e borda/foco de componente (WCAG 1.4.11).
   testes_front/harness_tokens.js recalcula tudo isto a cada rodada.
   ============================================================ */

/* ---------- IBM Plex Sans: SAIU DESTE ARQUIVO (camada 4a, 02/11/2026) ----------
   Os 8 @font-face da IBM Plex (4 pesos x latin e latin-ext) viviam aqui só porque o <iframe> de impressão da etiqueta da separação linka este
   arquivo; a tela usa Archivo (navsupply-ui/tokens.css traz o @font-face). Agora moram em etiqueta.css, o CSS que SÓ a etiqueta usa, e os 8 woff2
   saíram do precache do sw.js e não entram no cache em runtime: o iframe da etiqueta não é controlado pelo service worker (provado na revisão de 03/11/2026). O iframe segue linkando este arquivo, sem efeito sobre a fonte. */

:root {
  /* ---------- Identidade (preservar) — header, login, visor do leitor ----------
     Painéis escuros nos DOIS temas: lombada navy no claro, #070B18 no escuro. */
  --ink:        var(--lombada);
  --ink-2:      #1C2A57;   /* próprio: um passo acima da --lombada (navy mais claro: ícone do topo, campo do login). Escuro: #0F1730 (= --papel escuro). Sempre mais claro que --ink */
  --ink-line:   var(--navy-traco);       /* filete translúcido (rgba do --navy-texto) sobre o painel */
  --on-ink:     var(--navy-texto);       /* 13,6:1 sobre --ink (claro) / 17,3:1 (escuro) */
  --on-ink-2:   var(--navy-texto-fraco); /* 7,25:1 sobre --ink (claro) / 9,23:1 (escuro) */
  --brass:      var(--ouro);             /* filete dourado do header e selo de filial: 6,3:1 sobre --ink claro / 8,1:1 escuro (>=3:1 detalhe). Sobre superfície clara NÃO lê (2,4:1): texto dourado é --action-text */
  --brass-hi:   #D8B878;                 /* próprio no claro: dourado claro p/ ler sobre --ink (8,11:1). No escuro é o próprio --ouro-tinta do kit (mesmo valor) */

  /* ---------- Cor de ação ÚNICA: o dourado ----------
     --action PREENCHE (aba ativa, chip, checkbox, selo): 2,4:1 sobre branco, por
     isso nunca pinta TEXTO nem ÍCONE sobre superfície clara — texto/ícone é
     --action-text. Texto SOBRE o preenchimento dourado é --sobre-accent. */
  --action:      var(--ouro);
  --action-hi:   #B38F4C;                /* próprio: um passo mais escuro p/ hover de preenchimento. Escuro: #D8B878 (mais claro) */
  --action-line: #A28346;                /* próprio no claro: anel de foco e borda de seleção. O --ouro puro dá 2,43:1 / 2,14:1 sobre --surface / --bg e REPROVA 1.4.11; este fecha 3,58:1 / 3,16:1 (meio do caminho entre --ouro e --ouro-tinta). No escuro é o próprio --ouro: 6,35:1 / 7,30:1 */
  --action-dim:  var(--selecao);         /* fundo de seleção/chip ativo: frio, nunca creme (kit) */
  --action-text:    var(--ouro-tinta);   /* TEXTO/ÍCONE dourado: 5,56:1 sobre --surface, 4,91:1 sobre --bg, 4,76:1 sobre --selecao (claro); 8,11:1 / 9,32:1 / 7,13:1 (escuro) */
  --action-text-hi: #5F4A1F;             /* próprio: texto dourado em hover/ênfase: 8,45:1 / 7,45:1 (claro). Escuro: #E6C98F 9,63:1 / 11,06:1 */

  /* ---------- Botão primário: NAVY com texto claro (--navy é o do kit) ---------- */
  --navy-hi:  var(--navy-hover);
  --on-navy:  var(--navy-texto);         /* 13,6:1 sobre --navy (claro) / 5,76:1 (escuro: o --navy do kit sobe para #4A5A99) */

  /* ---------- Semânticas — só três + info (estado, nunca 5a variante de botão) ----------
     --ok e --navy são os do kit (mesmo nome, mesmo sentido). */
  --danger:     var(--erro);
  --danger-bg:  var(--erro-fundo);
  --on-danger:  #fff;                    /* 5,94:1 sobre --danger claro. Escuro: --selo-texto 6,86:1 (branco cairia a 2,71:1) */
  --warn:       var(--atencao);          /* preenchimento/borda: 3,72:1 sobre --surface. TEXTO âmbar é --warn-text */
  --warn-bg:    var(--atencao-fundo);
  --warn-text:  var(--atencao-tinta);    /* 5,64:1 sobre --surface, 4,97:1 sobre --bg, 5,15:1 sobre --warn-bg (claro); 8,28:1 / 9,51:1 (escuro) */
  --ok-bg:      var(--ok-fundo);
  --info-bg:    var(--info-fundo);       /* --info é o do kit (6,32:1 sobre --surface claro) */

  /* ---------- Toast (camada 3a do rebranding, 30/10/2026) ----------
     O kit já traz --toast-fundo (o navy do toast: #16224A claro / #0B1226 escuro), --toast-texto, --toast-ok e --toast-erro, e o
     --neutro (marcador do carimbo cinza) e o --erro-traco: NÃO se redeclaram aqui (ver o aviso do topo: var(--x) dentro de --x
     some com o token). Só o AVISO do toast não tem token no kit — o .toast.t-aviso do kit pinta o filete com --atencao; ganha o
     nome próprio para o #toast.aviso, o filete e o ícone lerem o mesmo par. */
  --toast-aviso: var(--atencao);         /* filete e ícone do toast de aviso sobre o --toast-fundo: 4,14:1 (claro) / 8,78:1 (escuro); >= 3:1 (gráfico). --toast-ok dá 6,57 / 7,92 e --toast-erro 5,69 / 6,86; o texto --toast-texto fecha 13,60 / 16,41 */

  /* ---------- Neutros ---------- */
  --bg:         var(--papel);
  --surface:    var(--folha);
  --surface-2:  var(--hover);
  --surface-3:  #E3E8EE;                 /* próprio (o kit não tem "pressionado"): um passo abaixo de --hover; mesmo valor do --skel. Escuro: #22305C */
  --border:             var(--linha);    /* única cor de borda de divisória/layout */
  --border-interactive: #7F8A99;         /* próprio no claro: contorno de botão/campo. --campo-borda do kit (#98A3B3) dá 2,55:1 / 2,25:1 e --campo-borda-forte 2,85:1 / 2,51:1 — REPROVAM 1.4.11. Este: 3,50:1 sobre --surface, 3,09:1 sobre --bg. Escuro: --campo-borda do kit, 3,23:1 / 3,71:1 */
  --fg:   var(--tinta);                  /* 15,73:1 sobre --surface, 13,87:1 sobre --bg (claro); 13,03:1 / 14,97:1 (escuro) */
  --fg-2: #3C475C;                       /* próprio, entre --tinta e --tinta-fraca: 9,34:1 sobre --surface, 8,24:1 sobre --bg (claro). Escuro: #C5CCDA 9,56:1 / 10,99:1 */
  --fg-3: var(--tinta-fraca);            /* 5,71:1 sobre --surface, 5,04:1 sobre --bg, 4,64:1 sobre --surface-3 (claro); 7,25:1 / 8,33:1 / 6,00:1 (escuro) */

  /* ---------- Cabeçalho de tabela: navy (kit --cab-tabela) ---------- */
  --th-bg:   var(--cab-tabela);          /* #16224A claro / #0B1226 escuro */
  --th-fg:   var(--cab-tabela-texto);    /* 13,6:1 (claro) / 15,7:1 (escuro) */
  --th-fg-2: var(--navy-texto-fraco);    /* 7,25:1 sobre o navy claro; texto de apoio dentro do cabeçalho */

  /* ---------- Tipografia ----------
     Archivo variável (fontes locais do kit). Corpo 16px e campos 17px NÃO
     seguem os 14px do kit: é coletor de mão, leitura a um braço. Escada de
     pesos (a IBM Plex tinha 400/500/600/700; Archivo variável aceita todos):
     450 secundário, 500 corpo, 550 médio, 600 rótulo/botão, 700 título.
     EXCEÇÃO DECLARADA (camada 2): 800 SÓ no wordmark NAVSUPPLY (.topbar .tb-marca b, .drawer-brand .bn, .lm-nome: o peso
     do wordmark do kit); harness_tokens.js confere que nenhuma outra regra usa 800 ou 900. */
  --font: "Archivo", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 28px;

  /* ---------- Raio, sombra, espaçamento ---------- */
  --radius: var(--raio);                          /* 2px: controles e folhas */
  --radius-flutuante: var(--raio-flutuante);      /* 6px: modal, toast e popover do multiSelect (os flutuantes) */
  --radius-pill: 999px;                           /* os carimbos em pílula só mudam na camada 3 */
  --shadow: var(--sombra);                        /* SÓ drawer, modal, toast, popover do multiSelect, o cartão de login (.login-cartao, §17 do kit: a única folha que flutua sobre a cena) e a camada "Aguarde…" (a caixa do Aguarde segue com --radius) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;

  /* transição de tela e micro-interações. --t (150ms) é o do kit. */
  --ease: cubic-bezier(.2,.7,.3,1);
  --scrim: var(--veu);

  /* ---------- Fallbacks fixos para os color-mix() de style.css ----------
     Chrome/WebView Android < 111 não reconhece color-mix() — a declaração
     inteira é descartada. Regra da casa: TODO color-mix() em style.css tem uma
     declaração da MESMA propriedade logo ANTES usando um destes tokens fixos,
     no mesmo RGB/opacidade do color-mix() (ver DESIGN.md, "piso de suporte").
     RGB recalculado para os tokens do kit (testes_front/harness_tokens.js confere). */
  --flash-ok-bg: rgba(46,125,79,.26);       /* #flash.ok — mesmo RGB de --ok (#2E7D4F), .26 */
  --flash-danger-bg: rgba(178,58,46,.30);   /* #flash.erro — mesmo RGB de --danger (#B23A2E), .30 */
  --tb-emp-bg-dim: rgba(238,241,244,.05);   /* .tb-emp fundo — RGB de --on-ink (#EEF1F4), igual nos 2 temas */
  --avatar-bg-dim: rgba(238,241,244,.08);   /* .drawer-user .avatar — RGB de --on-ink */
  --mira-barras-bg-dim: rgba(238,241,244,.60);   /* .zona-scan .mira .barras — RGB de --on-ink */
  --btn-perigo-hover-bg: rgba(178,58,46,.20);    /* .btn-mini.perigo:hover — RGB de --danger (#B23A2E), .20 */

  /* ================================================================
     ALIASES de transição — nomes ANTIGOS apontando para os tokens NOVOS,
     para app-conf.js (style="" inline) e o próprio style.css continuarem
     funcionando sem varrer o CSS inteiro. O alias --linha SAIU: é nome do kit
     (mesmo valor de --border). CAMADA 4a (02/11/2026): saíram os 3 sem NENHUM uso
     (--accent-hi, --r-lg e --r-md: git grep em static/*.css, *.js, *.html e testes_front,
     fora comentários e a tabela de migração do kit). FICAM os que style.css e ui.css
     ainda usam (a camada 4b os migra para os nomes do kit): --accent, --accent-dim,
     --line, --line-hi, --line-btn, --muted, --r, --r-sm, --r-pill, --sh-1, --sh-2,
     --sh-3 e --sobre-accent. ================== */
  --accent: var(--action);
  --accent-dim: var(--action-dim);
  --line: var(--border);
  --line-hi: var(--border);
  --line-btn: var(--border-interactive);
  --muted: var(--fg-3);
  --r: var(--radius);
  --r-sm: var(--radius);
  --r-pill: var(--radius-pill);
  --sh-1: none;
  --sh-2: none;
  --sh-3: var(--shadow);
  /* texto SOBRE o preenchimento dourado (--action) e sobre o âmbar (--warn, o selo da
     Torre): --selo-texto do kit (#0B1226): 7,66:1 sobre --ouro, 5,00:1 sobre --atencao
     (claro), 8,78:1 sobre --atencao (escuro). O branco de antes dava 2,4:1 sobre o dourado. */
  --sobre-accent: var(--selo-texto);
  /* texto SOBRE o próprio tint (--ok-bg/--danger-bg), não sobre --surface limpo.
     Valor próprio, mais escuro que o token sólido no claro (--ok dá 4,57:1 sobre o
     tint). Conferido contra --surface, --bg E o tint compositado. É também o TEXTO
     verde sobre superfície comum: o --ok cru dá 4,45:1 sobre --bg e 4,31:1 sobre a
     seleção (revisão de 29/10/2026), por isso nenhuma regra pinta texto com var(--ok);
     o harness varre as regras (auditoria por regra). */
  --fg-ok: #1B6339;    /* claro: 7,27:1 sobre --surface / 6,41:1 sobre --bg / 6,59:1 sobre --ok-bg. Escuro: --ok (6,57:1 / 7,54:1 / 5,35:1 sobre o tint) */
  --fg-erro: #8F2A20;  /* claro: 8,33:1 / 7,35:1 / 7,41:1 sobre --danger-bg. Escuro: #F2A094 próprio (ver o bloco escuro) */
  /* texto sobre --ok SÓLIDO (rótulo do swipe-to-contar) */
  --sobre-ok: #fff;   /* 5,05:1 sobre --ok claro. Escuro: --selo-texto 7,92:1 (branco cairia a 2,35:1) */
}

/* ============================================================
   TEMA ESCURO — mesmos nomes de token, valores derivados. O escuro é o NAVY
   do kit (papel #0F1730, folha #16224A, lombada #070B18, ouro-tinta #D8B878);
   substitui o cinza neutro #171717 de 22/09/2026 por decisão do rebranding
   de 28/10/2026. Os tokens do kit já mudam sozinhos (navsupply-ui/tokens.css);
   aqui só os PRÓPRIOS do Coletor que têm valor diferente no escuro, com os
   mesmos dois seletores do kit (sistema escuro sem escolha / escolha no botão).
   Nunca um seletor de cor por tela.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-tema="claro"]) {
    --surface-3: #22305C;   /* um passo acima de --hover escuro; mesmo valor do --skel escuro */
    --ink-2: #0F1730;   /* = --papel escuro; fica acima do --ink #070B18 */
    --brass-hi: var(--ouro-tinta);   /* #D8B878 */
    --action-hi: var(--ouro-tinta);   /* hover de preenchimento: mais claro no escuro */
    --action-line: var(--ouro);   /* 6,35:1 sobre --surface, 7,30:1 sobre --bg */
    --action-text-hi: #E6C98F;   /* 9,63:1 sobre --surface, 11,06:1 sobre --bg */
    --border-interactive: var(--campo-borda);   /* #6370A6: 3,23:1 sobre --surface, 3,71:1 sobre --bg */
    --fg-2: #C5CCDA;   /* 9,56:1 sobre --surface, 10,99:1 sobre --bg */
    --fg-ok: var(--ok);   /* #5DBB8A */
    --fg-erro: #F2A094;   /* próprio: o --erro do kit (#E8806F) dá 4,21:1 sobre o selo em linha selecionada; este: 7,51:1 sobre --surface, 8,63:1 sobre --bg, 5,56:1 sobre o tint sobre --selecao */
    --on-danger: var(--selo-texto);   /* 6,86:1 sobre --erro escuro (texto sobre preenchimento CLARO no escuro) */
    --sobre-ok: var(--selo-texto);   /* 7,92:1 sobre --ok escuro */
    --flash-ok-bg: rgba(93,187,138,.26);   /* mesmo RGB de --ok escuro (#5DBB8A) */
    --flash-danger-bg: rgba(232,128,111,.30);   /* mesmo RGB de --danger escuro (#E8806F) */
    --btn-perigo-hover-bg: rgba(232,128,111,.20);   /* mesmo RGB de --danger escuro */
  }
}

:root[data-theme="dark"], :root[data-tema="escuro"] {
  --surface-3: #22305C;   /* um passo acima de --hover escuro; mesmo valor do --skel escuro */
  --ink-2: #0F1730;   /* = --papel escuro; fica acima do --ink #070B18 */
  --brass-hi: var(--ouro-tinta);   /* #D8B878 */
  --action-hi: var(--ouro-tinta);   /* hover de preenchimento: mais claro no escuro */
  --action-line: var(--ouro);   /* 6,35:1 sobre --surface, 7,30:1 sobre --bg */
  --action-text-hi: #E6C98F;   /* 9,63:1 sobre --surface, 11,06:1 sobre --bg */
  --border-interactive: var(--campo-borda);   /* #6370A6: 3,23:1 sobre --surface, 3,71:1 sobre --bg */
  --fg-2: #C5CCDA;   /* 9,56:1 sobre --surface, 10,99:1 sobre --bg */
  --fg-ok: var(--ok);   /* #5DBB8A */
  --fg-erro: #F2A094;   /* próprio: o --erro do kit (#E8806F) dá 4,21:1 sobre o selo em linha selecionada; este: 7,51:1 sobre --surface, 8,63:1 sobre --bg, 5,56:1 sobre o tint sobre --selecao */
  --on-danger: var(--selo-texto);   /* 6,86:1 sobre --erro escuro (texto sobre preenchimento CLARO no escuro) */
  --sobre-ok: var(--selo-texto);   /* 7,92:1 sobre --ok escuro */
  --flash-ok-bg: rgba(93,187,138,.26);   /* mesmo RGB de --ok escuro (#5DBB8A) */
  --flash-danger-bg: rgba(232,128,111,.30);   /* mesmo RGB de --danger escuro (#E8806F) */
  --btn-perigo-hover-bg: rgba(232,128,111,.20);   /* mesmo RGB de --danger escuro */
}