/* css/tokens.css · tokens, reset e temas do PWA Passa Junto PRF.
   Portado de public/prf.css:7-33 (:root) e 35-62 (reset e fontes) sem mudar valor;
   acrescenta --letra-lei, safe-area (PLAYBOOK §3.2), temas sépia/claro e color-scheme (BLUEPRINT §4.9).
   Paleta oficial: ouro #F8C800 · blau #0A0F35 · prata #F5F7FA (Decreto 10.438/2020). */

:root {
  --bg: #12141d;
  --card: #181b26;
  --tx: #eef0f6;
  --tx2: #c3c8da;
  --mut: #9aa0b8;
  --tabin: #7d8697;
  --line: rgba(255, 255, 255, 0.09);
  --line2: rgba(255, 255, 255, 0.17);

  /* Semântica fixa */
  --gold: #C8A84B;
  --goldd: #E0A838;
  --green: #54b98a;
  --red: #e25a52;
  --lei: #4a9eff;
  --jur: #b89adf;
  --dout: #5ad0c8;
  --aten: #fb923c;
  --ia: #a78bfa;
  --zap: #25d366;

  /* Botao de atualizar: par PROPRIO, porque ele e chapa flutuante por cima de qualquer tela e precisa de DOIS
     contrastes ao mesmo tempo -- o texto contra a chapa (piso 4,5:1) e a chapa contra o fundo do tema (piso
     3:1). Era ouro ate 26/10 e sumia: num app em que tudo e ouro, aviso em ouro e lido como parte da marca.
     O azul claro resolve no tema escuro e NAO resolve nos claros: medido, #4a9eff da 2,5:1 contra o tema
     claro e 2,2:1 contra o sepia, abaixo do piso. Entao o par vira com o tema (ver blocos la embaixo), e e
     par proprio e nao --lei justamente para os dois numeros serem escolhidos juntos. */
  --atualiza: #4a9eff;        /* chapa: 7,2:1 contra o fundo escuro */
  --atualiza-tx: #0A0F35;     /* texto blau sobre ela: 6,7:1 */
  --atualiza-brilho: 74, 158, 255;

  /* O OURO COMO TEXTO E OUTRO TOKEN, e a razao e de contraste (28/10/2026). O #F8C800 e a identidade e
     fica igual nos tres temas como CHAPA, com texto escuro em cima: 12,5:1 contra o fundo escuro. Mas ele
     tambem era usado como COR DE TEXTO em doze lugares -- a aba ativa da tabbar, o codigo de convite de
     44px, o "junto" da marca, os chips de fundador e de teste -- e ai, nos temas claros, ele some:

         #F8C800 sobre o tema claro   1,33:1
         #F8C800 sobre o sepia        1,15:1     (piso 4,5:1)

     Praticamente invisivel. Achado pela sessao CLAUDE_WORKER_E14 na revisao do estudo de UX, e o pior e
     que o estudo dizia "nao auditei acessibilidade alem de contraste" -- quando o contraste auditado era
     so o de um botao. A frase sugeria uma garantia que nao existia.

     Entao: --acc continua a identidade e a chapa; --acc-tx e o ouro que vira texto, e ele escurece nos
     temas claros. No tema escuro os dois sao a mesma cor, porque ali o ouro claro e que funciona. */
  --acc-tx: #F8C800;   /* ouro de TEXTO: no escuro e o proprio ouro, 12,5:1 */

  /* Porta PRF (Camada 1 - Identidade) */
  --acc: #F8C800;      /* Ouro oficial da corporação */
  --acc2: #F5F7FA;     /* Prata */
  --borda: #0A0F35;    /* Blau (azul-marinho profundo) */
  --nome: 'PRF';

  /* Leitura */
  --letra-lei: 16px;
  --pill-tx: #15110a;
  --pill-sombra: #8a6a1e;
  --fundo-pagina: #090a0f;
  --fundo-tabbar: rgba(12, 12, 16, 0.97);
  --branco: #fff;

  /* Safe-area (iPhone com notch; PLAYBOOK §3.2) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
  /* largura da tabbar quando ela vira COLUNA (tela baixa e larga, ver components.css): cabe o icone de
     23px mais o rotulo em Barlow Condensed 11.5px, que e a mesma regua da versao deitada. */
  --tabbar-lateral: 76px;
  --debug-bar-h: 52px;   /* barra do modo debugger + folga pras abas: a pegada toda (ver .debug-selo) */
  --leitor-bar-h: 56px;  /* barra de leitura do leitor de obra (ver .leitor-barra) */

  /* AS FAMÍLIAS DE COR DAS MEDALHAS (06/11/2026). Cada conquista pertence a uma família pelo que ela
     significa -- pontaria em ouro, constância em verde, serviço em laranja, estudo em azul, dupla em
     roxo --, e não uma cor por medalha: cinco famílias se reconhecem na grade, catorze cores viram
     confete. `--badge-1` é o traço e o aro (o que desenha a silhueta); `--badge-2` é a chapa de fundo.

     MORAM AQUI, e não soltas no components.css, por duas razões. A regra da casa: cor que o tema pode
     precisar ajustar é token -- os temas claro e sépia já tiveram de escurecer o ouro uma vez (ver
     --acc-tx acima). E o teste de CSS cobra exatamente isto: `var(--x)` sem definição em tokens.css é
     token inventado, que não aplica nada e não avisa.

     A MEDALHA CONTINUA ESCURA NOS TRÊS TEMAS, de propósito: ela é uma peça de metal, com chapa e brilho
     próprios, não uma área da interface. Por isso as famílias não se redefinem por tema -- o que muda
     com o tema é o que está ao redor dela. */
  --badge-ouro-1: #f8c800;
  --badge-ouro-2: #c46b20;
  --badge-verde-1: #65d9b2;
  --badge-verde-2: #247b72;
  --badge-laranja-1: #ff8c42;
  --badge-laranja-2: #9f3f20;
  --badge-azul-1: #69aefe;
  --badge-azul-2: #3158a8;
  --badge-roxo-1: #a99aff;
  --badge-roxo-2: #5845a8;
  /* o par que cada medalha consome; o seletor de `.arte-*` troca pela família dela */
  --badge-1: var(--badge-ouro-1);
  --badge-2: var(--badge-ouro-2);
}

html { color-scheme: dark; }

/* Tema sépia: neutros quentes, mesma semântica */
[data-tema="sepia"] {
  --bg: #f1e7d3;
  --card: #faf3e4;
  --tx: #2a2418;
  --tx2: #4a4030;
  --mut: #7a6e58;
  --tabin: #8a7e68;
  --line: rgba(60, 40, 10, 0.10);
  --line2: rgba(60, 40, 10, 0.20);
  --acc-tx: #6b5010;   /* 6,35:1 no claro · 5,50:1 no sepia · 7,55:1 sobre card branco */
  --lei: #1f5fbf;
  --green: #2f8a62;
  --red: #c2453d;
  --aten: #c96a1c;
  --ia: #7a5bd6;
  --dout: #1f8c85;
  --fundo-pagina: #e6dbc3;
  --fundo-tabbar: rgba(250, 243, 228, 0.97);
  --branco: #1a1510;
}
[data-tema="sepia"], [data-tema="claro"] { color-scheme: light; }
/* O botao de atualizar nos temas claros: chapa ESCURA com texto branco, o inverso do tema escuro. O azul
   claro (#4a9eff) daria 2,5:1 contra o fundo claro e 2,2:1 contra o sepia -- a chapa sumiria no papel. O azul
   fechado sobe pra 5,5:1 contra o claro e 5,3:1 contra o sepia, e o texto branco em cima dele da 6,1:1.
   Os dois pisos atendidos nos dois sentidos, que e a razao de o par ser proprio e nao herdado de --lei. */
[data-tema="sepia"] .btn-atualizar, [data-tema="claro"] .btn-atualizar {
  --atualiza: #1f5fbf;
  --atualiza-tx: #ffffff;
  --atualiza-brilho: 31, 95, 191;
}

/* Tema claro: neutros frios */
[data-tema="claro"] {
  --bg: #f4f5fa;
  --card: #ffffff;
  --tx: #14161f;
  --tx2: #3a3f52;
  --mut: #6b7186;
  --tabin: #7d8697;
  --line: rgba(10, 15, 53, 0.10);
  --line2: rgba(10, 15, 53, 0.20);
  --acc-tx: #6b5010;   /* 6,35:1 no claro · 5,50:1 no sepia · 7,55:1 sobre card branco */
  --lei: #1f5fbf;
  --green: #2f8a62;
  --red: #c2453d;
  --aten: #c96a1c;
  --ia: #7a5bd6;
  --dout: #1f8c85;
  --fundo-pagina: #e9ebf3;
  --fundo-tabbar: rgba(255, 255, 255, 0.97);
  --branco: #0f1118;
}

/* A LARGURA DA COLUNA É UM TOKEN, E CRESCE COM A TELA (01/11/2026).
   Founder, no Galaxy Tab S11: "a view nao ta adaptativa... ta travando width como se fosse so celular".
   Media medida em produção: num monitor de 1707 px o app usava 480 e desperdiçava 1227 -- 28% da tela.

   POR QUE NÃO OCUPAR A TELA INTEIRA, que seria o reflexo óbvio: este app é quase todo TEXTO -- enunciado de
   questão, artigo de lei, capítulo de livro. Linha muito longa destrói a leitura: o olho perde o começo da
   linha seguinte. A faixa confortável é de 60 a 80 caracteres, e é isso que estes três degraus perseguem --
   não a largura da tela, a largura do olho. Esticar até 1707 px seria pior que os 480.

   Os degraus: 480 no celular; 560 quando cabe (tablet em pé, celular deitado); 620 em tela grande, junto com
   um corpo de texto um pouco maior, porque a distância de leitura também aumenta.

   Os cortes sairam de aparelho real, nao de catalogo: 700 pega o celular DEITADO (740 de largura) e o tablet
   em pe; 900 pega o tablet deitado (1180) e qualquer monitor. */
:root { --app-largura: 480px; }
@media (min-width: 700px)  { :root { --app-largura: 560px; } }
@media (min-width: 900px)  { :root { --app-largura: 620px; } }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo-pagina);
  color: var(--tx);
  font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  /* nada pode vazar na horizontal e cortar conteudo na borda direita (print do founder 19/10, com o selo PRF cortado).
     'clip' e nao 'hidden' de proposito: hidden criaria um container de rolagem e quebraria o position:sticky do pe. */
  overflow-x: clip;
}

/* Em tela grande a pessoa lê mais longe do que segura um celular: 16 px ali é menor do que parece. O passo é
   de um pixel só, de propósito -- tudo no app é dimensionado em px a partir desta base, e um salto maior
   empurraria rótulos de botão para a segunda linha em telas que hoje cabem. */
@media (min-width: 1024px) { html, body { font-size: 17px; } }

/* CELULAR DEITADO: sobra largura e falta ALTURA (uns 360 px úteis). O padding vertical do casco foi desenhado
   para tela em pé e, deitado, come metade do que resta -- a pessoa vê o cabeçalho e quase nada do conteúdo.
   Só `max-height`, sem checar orientação: o que atrapalha é a altura curta, venha de onde vier (janela baixa
   no computador conta igual). */
@media (max-height: 560px) {
  :root { --tabbar-h: 54px; }
}

/* SELEÇÃO = MARCA-TEXTO, NÃO CARIMBO DO SISTEMA (founder, 05/11/2026: "texto selecionado devia ficar com
   uma hachura amarela bemmm fraquinha"). O azul chapado do navegador apaga o texto por baixo e não é deste
   app; num leitor de lei, selecionar é o gesto de grifar, e o que sai disso tem que PARECER grifo.
   Só o fundo é declarado, de propósito: sem `color`, o navegador mantém a cor original das letras, então o
   grifo vale igual nos três temas do leitor -- no claro e no sépia o ouro a 18% passa como marca-texto sobre
   papel, no escuro acende o trecho sem estourar. Declarar `color` aqui obrigaria um valor por tema e, errando
   um, a seleção sumiria dentro do próprio realce. */
::selection { background: rgba(248, 200, 0, .18); }
::-moz-selection { background: rgba(248, 200, 0, .18); }

/* Prevenir Arial: botões e inputs herdam font-family */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

a { color: inherit; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}