/* ════════════════════════════════════════════════════════════════════════════
   OS TOKENS DA MARCA — declarados UMA vez, para o sistema inteiro.
   ════════════════════════════════════════════════════════════════════════════

   Antes disto, este mesmo bloco estava copiado dentro de OITO arquivos HTML:
   painel, admin, balcão, as duas telas de entrada, criar conta e definir senha.
   Trocar o azul da marca era editar oito lugares e torcer para não esquecer
   nenhum — e duas das cópias já tinham derivado para uma forma comprimida
   diferente das outras seis.

   O sintoma disso não é a cor mudar: é um estilo SUMIR numa tela e continuar
   noutra, sem erro nenhum. Foi o que aconteceu com `.card.alerta`, que existia
   no painel e não no admin, e o card ficou igual aos outros no dia em que
   precisava se destacar.

   ── como usar ──────────────────────────────────────────────────────────────

   Toda tela carrega este arquivo ANTES do próprio <style>:

       <link rel="stylesheet" href="/marca.css">

   e nunca redeclara um `--token`. Há um teste que reprova se alguém redeclarar.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── superfícies ──────────────────────────────────────────────────────────
     O tom exato de cada uma está no @supports do fim do arquivo, em oklch:
     hexadecimal arredonda, e a diferença aparece justamente nos tons vizinhos,
     que é onde se separa um cartão do fundo. O hex daqui é o que o navegador
     velho recebe, e nele um degrau a menos entre superfícies é o menor dos
     problemas — a alternativa era ficar sem cor nenhuma. */
  --fundo:       #0a1328;
  --lateral:     #050c1e;
  --superficie:  #131e37;
  --superficie2: #1d2842;
  --linha:       #29354f;

  --texto:       #f7f8fc;
  --suave:       #adb5c1;
  --fraco:       #7e8796;

  /* ── a marca ──────────────────────────────────────────────────────────────
     O degradê era azul→VIOLETA, herdado de um tema antigo cuja variável ainda
     se chamava `--gradient-gold`. Azul→violeta é o gesto que toda fintech faz,
     e aqui ele custava caro: gastava a única cor forte da interface em
     decoração, sobrando nada para dizer coisa alguma.

     Agora o degradê é azul→azul mais fundo. Continua sendo destaque, e para de
     competir com as cores que carregam informação logo abaixo. */
  --marca:       #1795fa;
  --marca2:      #006bd9;
  --marca-fraca: #1c2c51;
  --marca-texto: #fafcff;
  --degrade:     linear-gradient(135deg, #1795fa 0%, #006bd9 100%);
  /* Existia usado no admin e nunca declarado em lugar nenhum: três bordas de
     foco eram inválidas e não pintavam nada. Agora é o azul da marca clareado,
     que é o que aquelas três regras queriam dizer. */
  --claro:       #67b0f9;

  /* ── AS DUAS MOEDAS ───────────────────────────────────────────────────────
     A MercosulPay existe para transformar guarani em real. Essa é a única
     coisa que ela faz e que ninguém mais faz igual — então é ela que ganha cor.

     Azul é real, âmbar é guarani, e vale em toda tela: no teclado do balcão, no
     visor, na fila de saque, no extrato. Quem opera aprende a dupla uma vez e
     ela não muda de sentido em lugar nenhum.

     Isto NÃO é enfeite: numa lista que mistura as duas moedas, a cor separa
     antes do símbolo — e ler ₲ ou R$ num número comprido exige parar e olhar.

     O âmbar é escuro o bastante para o texto claro passar por cima sem
     esforço, e distante do `--alerta` (amarelo) para "guarani" nunca ser
     confundido com "atenção". */
  --real:         #4ba3f7;
  --real-fundo:   #0e294a;
  --guarani:      #eca851;
  --guarani-fundo: #412805;

  /* ── situação ─────────────────────────────────────────────────────────── */
  --verde:       #00c47f;
  --erro:        #ee343b;
  --alerta:      #ebaa2d;

  /* ── tipografia ───────────────────────────────────────────────────────────
     IBM Plex, uma família em dois papéis. A razão é prosaica e é a que importa
     numa tela de dinheiro: os algarismos do Plex são tabulares de verdade, e
     coluna de valor alinha sozinha — `₲ 1.430.000` não dança quando o número
     muda. Poppins é redonda e simpática; não é uma fonte de ler número.

     O mono não é decoração: é onde vive o que se confere dígito a dígito —
     chave Pix, código do terminal, CPF, id de transação. */
  --fonte:      "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sombra-marca: 0 10px 40px -10px rgba(23, 149, 250, 0.35);
  --sombra-cartao: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --raio: 0.875rem;
}

/* ── o que vale para toda tela ─────────────────────────────────────────────
   Só o que é vocabulário, não componente. Botão, card e pílula continuam na
   tela que os usa: eles já divergiram entre as telas, e unificá-los é uma
   decisão de aparência tela a tela, não uma troca de arquivo. */

/* Algarismo tabular em TODA parte onde há número.
   Sem isto, `R$ 1.204,50` e `R$ 998,10` têm larguras diferentes e a coluna
   ondula a cada atualização — o que numa tela de saldo parece defeito. */
b, strong, td, th, input, .mono{ font-variant-numeric: tabular-nums; }

.mono{ font-family: var(--fonte-mono); }

/* ── as duas moedas, como componente ───────────────────────────────────────
   Uma classe só, usada em toda tela onde aparece dinheiro. */
.moeda-g{ color: var(--guarani); }
.moeda-r{ color: var(--real); }

/* A MOEDA ATIVA, para telas que trabalham numa por vez (o balcão).
   Um atributo no elemento e todo o resto herda: o visor, a pílula escolhida, o
   valor no QR. Sem isto cada regra teria que saber qual moeda está ativa, e
   quem esquecesse uma deixaria um número azul numa tela âmbar.

   O texto POR CIMA da cor vem junto: o âmbar é claro e pede tinta escura, o
   azul é escuro e pede tinta clara. Separar os dois é como se acaba com um
   botão de contraste ruim. */
[data-moeda="g"]{ --cor-moeda: var(--guarani); --cor-moeda-fundo: var(--guarani-fundo);
                  --cor-moeda-texto: #2c1400; }
[data-moeda="r"]{ --cor-moeda: var(--real);    --cor-moeda-fundo: var(--real-fundo);
                  --cor-moeda-texto: var(--marca-texto); }

/* A LINHA DE CONVERSÃO: o valor na moeda do lojista e, embaixo, o que o
   pagador realmente paga. É o que a MercosulPay faz, virando um objeto só —
   antes cada tela montava isso do seu jeito, e o balcão dizia uma coisa
   enquanto o painel dizia outra sobre a mesma cobrança. */
.conversao{ display: grid; gap: 2px; }
.conversao .em-guarani{
  font-family: var(--fonte-mono); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--guarani);
  letter-spacing: -0.01em; line-height: 1.1;
}
.conversao .em-real{
  font-family: var(--fonte-mono); font-size: 0.8em;
  font-variant-numeric: tabular-nums; color: var(--real);
}
.conversao .cotacao{ font-size: 0.72em; color: var(--fraco); }

/* ── OS MESMOS TOKENS, EM OKLCH ────────────────────────────────────────────
   Acima eles estão em hexadecimal, e é de propósito: `oklch()` só existe a
   partir do Chrome 111, e a maquininha de balcão (SUNMI, Android 7) tem
   WebView bem mais velho. Lá, TODA declaração de cor era descartada — o que
   não deixava a tela feia, deixava INUTILIZÁVEL: `border:1px solid var(--x)`
   com var inválido invalida o shorthand inteiro, então o campo de senha
   ficava sem borda e sem fundo, invisível sobre o branco. Ninguém conseguia
   entrar pelo POS, e o erro não aparecia em lugar nenhum.

   Tem que ser @supports, e não hex seguido de oklch na linha de baixo: uma
   custom property não é validada no parse, então o navegador antigo guarda o
   oklch mesmo sem entendê-lo e o hex nunca é usado. Só a consulta de suporte
   separa os dois.

   Quem enxerga oklch continua vendo exatamente as cores de antes. */
@supports (color: oklch(0 0 0)) {
  :root {
    --fundo: oklch(0.19 0.045 265);
    --lateral: oklch(0.16 0.040 265);
    --superficie: oklch(0.24 0.050 265);
    --superficie2: oklch(0.28 0.050 265);
    --linha: oklch(0.33 0.050 265);
    --texto: oklch(0.98 0.005 265);
    --suave: oklch(0.77 0.020 262);
    --fraco: oklch(0.62 0.025 262);
    --marca: oklch(0.66 0.18 250);
    --marca2: oklch(0.54 0.19 255);
    --marca-fraca: oklch(0.30 0.07 265);
    --marca-texto: oklch(0.99 0.005 265);
    --degrade: linear-gradient(135deg, oklch(0.66 0.18 250) 0%, oklch(0.54 0.19 255) 100%);
    --claro: oklch(0.74 0.13 250);
    --real: oklch(0.70 0.15 250);
    --real-fundo: oklch(0.28 0.07 255);
    --guarani: oklch(0.78 0.13 70);
    --guarani-fundo: oklch(0.30 0.06 70);
    --verde: oklch(0.72 0.17 160);
    --erro: oklch(0.62 0.22 25);
    --alerta: oklch(0.78 0.15 78);
    --sombra-marca: 0 10px 40px -10px oklch(0.66 0.18 250 / 0.35);
    --sombra-cartao: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 8px 24px -12px oklch(0 0 0 / 0.6);
  }
  [data-moeda="g"] {
    --cor-moeda-texto: oklch(0.22 0.06 70);
  }
}