/* A MARCA DO PAYFLOW — cores, medidas e regras de base, num sítio só.

   É o design system da Kingdom Library («Kingdom UI») com três trocas,
   decididas a 25/09/2026 e escritas no PLANO.md, secção Design:

   1. A cor de acção é o roxo do logo, lido dos ficheiros e não escrito de
      cabeça: sólido #842DE3, e o gradiente do ícone #9338F2 → #6413BE.
      Branco sobre qualquer ponto do botão dá entre 5,1:1 e 6,8:1 — passa AA,
      coisa que o laranja da Library não fazia.
   2. Os cartões têm 16 px de canto em vez de 22, e o que está dentro deles
      desce na mesma proporção (12 · 10 · 8 · 6). Botões e etiquetas
      continuam pílulas.
   3. Na Library o violeta era reservado para prazos e pessoas. Aqui o roxo é
      a voz, por isso deixa de haver essa reserva: um relógio de desconto é
      tinta escura, não um segundo roxo.

   O verde é «pago», «seguro» e «poupa» — e é o botão de PAGAR, e só esse
   (decisão do Shelton, 25/09/2026). Qualquer outra acção principal é roxa.
   Um ecrã continua a ter um só botão principal: onde se paga, é o verde.

   As páginas passam a usar isto parte a parte (PLANO.md): o checkout
   primeiro. Uma página que ainda não passou mantém o seu :root.

   As cores e as medidas estão no marca-cores.css, que cada página lê antes
   deste ficheiro (a razão está escrita lá). */

*{box-sizing:border-box}
/* O atributo hidden perde para qualquer display do autor (CLAUDE.md). */
[hidden]{display:none !important}
body{margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:rgba(132,45,227,.2); color:var(--ink)}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
a{color:var(--roxo-ink); text-underline-offset:3px}
:focus-visible{outline:none; box-shadow:var(--ring)}
/* Dinheiro e contagens: algarismos da mesma largura, para as colunas alinharem. */
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); font-size:.92em}

@media (max-width:640px){ body{font-size:14.5px} }

/* Movimento reduzido: abranda, não desliga. Uma roda parada não se distingue
   de um ecrã morto (PLANO.md, «Os elementos de carregamento»). */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}