/* 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. */

:root{
  color-scheme: light;

  /* O chão: pedra quente, como na Library. */
  --canvas:#F5F3F0; --canvas-2:#EFECE8;
  --surface:#FFFFFF; --surface-2:#FBFAF8; --sunken:#F1EEEA;
  --line:#E8E3DD; --line-strong:#D9D3CB;
  --ink:#1C1A17; --ink-2:#3B3732; --muted:#6F6962;
  /* Só para marcadores de campo e setas. Não chega aos 4,5:1 sobre branco,
     por isso nunca é texto que alguém tenha de ler. */
  --faint:#7D766E;

  /* A voz. */
  --roxo-300:#B98AF5; --roxo-400:#9338F2; --roxo-500:#842DE3;
  --roxo-600:#7B26D7; --roxo-700:#6413BE;
  --roxo-soft:#F3ECFD; --roxo-ink:#6A1FC0;

  /* Estados: só em etiquetas, pontos e avisos. */
  --verde:#15803D; --verde-soft:#E3F6EA; --verde-ink:#0F7A37;
  --vermelho:#D42A39; --vermelho-soft:#FDE8EA; --vermelho-ink:#B4202D;
  --ambar-soft:#FFF4D9; --ambar-ink:#8A5B00;
  --azul-soft:#E6F1FB; --azul-ink:#1F5F9A;

  --cta:linear-gradient(180deg, #9338F2 0%, #7B26D7 100%);
  --cta-hover:linear-gradient(180deg, #9D47F5 0%, #842DE3 100%);
  --cta-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 16px -4px rgba(100,19,190,.5);
  /* O botão de pagar: verde liso, sem gradiente, sem brilho e sem sombra
     (pedido do Shelton, 25/09/2026). É o verde mais claro com que o texto
     branco ainda passa AA: 4,6:1. Um tom acima já fica abaixo de 4,5:1, e
     «Pagar MZ 3 000,00» ao sol passava a custar a ler. */
  --pagar:#16873F;
  --pagar-hover:#13793A;
  --pagar-shadow:none;
  /* O painel da marca (cabeçalho dos emails, lado da entrada): o gradiente do ícone. */
  --painel-marca:linear-gradient(160deg, #9338F2 0%, #7B26D7 55%, #6413BE 100%);

  --card-bg:linear-gradient(180deg, #FFFFFF 0%, #FBFAF8 100%);
  --shadow-1:0 1px 2px rgba(28,22,16,.05), 0 6px 18px -8px rgba(28,22,16,.10);
  --shadow-2:0 2px 6px rgba(28,22,16,.06), 0 18px 40px -16px rgba(28,22,16,.22);
  --shadow-pop:0 12px 32px -8px rgba(28,22,16,.28), 0 2px 8px rgba(28,22,16,.08);
  --ring:0 0 0 3px rgba(132,45,227,.30);

  /* Cantos. Um cartão é 16; o que está dentro dele é sempre menor. */
  --r-dialogo:20px; --r-cartao:16px; --r-dentro:12px;
  --r-campo:10px; --r-mini:8px; --r-chip:6px; --r-pilula:999px;

  --font:"Google Sans","Product Sans","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  /* Só para códigos, referências e segredos. O dinheiro usa --font com .num. */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --canvas:#141311; --canvas-2:#1A1816;
    --surface:#1E1C19; --surface-2:#1B1917; --sunken:#26231F;
    --line:#2F2B27; --line-strong:#3D3833;
    --ink:#F4F0EA; --ink-2:#DDD6CD; --muted:#AAA298; --faint:#7F786F;
    --roxo-soft:#2A1B45; --roxo-ink:#C9A6FF;
    --verde-soft:#15301F; --verde-ink:#6FDC98;
    --vermelho-soft:#3A1A1D; --vermelho-ink:#FF8F98;
    --ambar-soft:#352A12; --ambar-ink:#F5C865;
    --azul-soft:#16283A; --azul-ink:#8CC4F5;
    --card-bg:linear-gradient(180deg, #211F1C 0%, #1C1A17 100%);
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.6);
    --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
    --shadow-pop:0 12px 32px -8px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
    --ring:0 0 0 3px rgba(185,138,245,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --canvas:#141311; --canvas-2:#1A1816;
  --surface:#1E1C19; --surface-2:#1B1917; --sunken:#26231F;
  --line:#2F2B27; --line-strong:#3D3833;
  --ink:#F4F0EA; --ink-2:#DDD6CD; --muted:#AAA298; --faint:#7F786F;
  --roxo-soft:#2A1B45; --roxo-ink:#C9A6FF;
  --verde-soft:#15301F; --verde-ink:#6FDC98;
  --vermelho-soft:#3A1A1D; --vermelho-ink:#FF8F98;
  --ambar-soft:#352A12; --ambar-ink:#F5C865;
  --azul-soft:#16283A; --azul-ink:#8CC4F5;
  --card-bg:linear-gradient(180deg, #211F1C 0%, #1C1A17 100%);
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.6);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
  --shadow-pop:0 12px 32px -8px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(185,138,245,.45);
}

*{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}
}