/* AS CORES E AS MEDIDAS DO PAYFLOW, sem mais nada.

   Vivem num ficheiro à parte do marca.css por causa do painel. O painel ainda
   não passou para o desenho novo (é a parte 5, depois de o index.html ser
   partido) e tem o seu próprio :root no entrada.css, com nomes iguais a estes
   (--ink, --line, --muted) e valores diferentes. O marca.css traz também regras
   de base (body, h1, p, a) que mexiam no painel inteiro.

   Por isso: as páginas novas lêem este ficheiro e o marca.css; o painel lê só
   este, ANTES do entrada.css. O :root do entrada.css vem depois e ganha no
   painel; o que tem data-marca="payflow" (a entrada, o recuperar, o ecrã de
   abertura) volta a declarar estes valores em si mesmo, e ganha dentro dele.
   Quando o painel passar, o atributo deixa de ser preciso. */

:root, [data-marca="payflow"]{
  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);
}