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

   O design system da Kingdom Library, na versão do Payflow (cantos de 16 px,
   Google Sans, pílulas), com a voz em AZUL e o chão em branco e cinza-azulado
   frio. As razões de cada cor estão no tracktor/DESIGN.md.

   O azul do botão é o do logo escurecido até o branco passar AA (5,0 a 6,6:1).
   O ciano do logo (#00B0FF) só aparece no gradiente da marca: com texto branco
   por cima dá 2,4:1. */

:root{
  color-scheme: light;

  --canvas:#F2F5FA; --canvas-2:#E8EEF6;
  --surface:#FFFFFF; --surface-2:#F8FAFD; --sunken:#EDF1F7;
  --line:#E1E7F0; --line-strong:#CCD5E2;
  --ink:#0E1726; --ink-2:#2A3446; --muted:#5B6678;
  /* Só para marcadores de campo e setas: não chega aos 4,5:1. */
  --faint:#8A94A6;

  /* A voz. */
  --azul-300:#7CC4FF; --azul-400:#2D8CF6; --azul-500:#0A6BE0;
  --azul-600:#005FCC; --azul-700:#004FB0;
  --azul-soft:#E8F1FE; --azul-soft-2:#D5E6FD; --azul-ink:#0B5CC7;

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

  --cta:linear-gradient(180deg,#0A6BE0 0%,#0058C2 100%);
  --cta-hover:linear-gradient(180deg,#1474E8 0%,#0060D0 100%);
  --cta-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -4px rgba(0,88,194,.45);
  /* O gradiente do ícone, tal como vem no ficheiro do logo. */
  --marca:linear-gradient(170deg,#0077F0 0%,#00B0FF 100%);
  /* O painel da entrada: o mesmo azul, mais fundo em baixo para o texto branco se ler. */
  --painel-marca:linear-gradient(160deg,#0A6BE0 0%,#0058C2 60%,#004FB0 100%);

  --card-bg:#FFFFFF;
  --shadow-1:0 1px 2px rgba(14,23,38,.05), 0 6px 18px -8px rgba(14,23,38,.10);
  --shadow-2:0 2px 6px rgba(14,23,38,.06), 0 18px 40px -16px rgba(14,23,38,.22);
  --shadow-pop:0 12px 32px -8px rgba(14,23,38,.28), 0 2px 8px rgba(14,23,38,.08);
  --ring:0 0 0 3px rgba(10,107,224,.32);

  --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;
  --mono:"Google Sans Code",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:#0A0F18; --canvas-2:#0F1622;
    --surface:#121A27; --surface-2:#111824; --sunken:#182233;
    --line:#1F2A3B; --line-strong:#2B384C;
    --ink:#EEF3FA; --ink-2:#CED7E4; --muted:#98A4B7; --faint:#6C788B;
    --azul-soft:#0F2747; --azul-soft-2:#15335C; --azul-ink:#86BEFF;
    --verde-soft:#123022; --verde-ink:#6FDC98;
    --vermelho-soft:#3A1A1D; --vermelho-ink:#FF8F98;
    --ambar-soft:#352A12; --ambar-ink:#F5C865;
    --card-bg:#121A27;
    --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(124,196,255,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --canvas:#0A0F18; --canvas-2:#0F1622;
  --surface:#121A27; --surface-2:#111824; --sunken:#182233;
  --line:#1F2A3B; --line-strong:#2B384C;
  --ink:#EEF3FA; --ink-2:#CED7E4; --muted:#98A4B7; --faint:#6C788B;
  --azul-soft:#0F2747; --azul-soft-2:#15335C; --azul-ink:#86BEFF;
  --verde-soft:#123022; --verde-ink:#6FDC98;
  --vermelho-soft:#3A1A1D; --vermelho-ink:#FF8F98;
  --ambar-soft:#352A12; --ambar-ink:#F5C865;
  --card-bg:#121A27;
  --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(124,196,255,.45);
}

/* Regras de base partilhadas pela entrada, pelo recuperar e pela aplicação. */
*{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:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:rgba(10,107,224,.2)}
:focus-visible{outline:none; box-shadow:var(--ring)}
.num{font-variant-numeric:tabular-nums}
.so-leitor{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* A roda de espera: aparece aos 400 ms; se a resposta chegar antes, ninguém a vê. */
@keyframes rodar{ to{ transform:rotate(1turn) } }
@keyframes surgir{ from{ opacity:0 } to{ opacity:1 } }
.roda{width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.15em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:rodar .8s linear infinite, surgir .2s ease .4s both}
/* Movimento reduzido: abranda, não desliga. Uma roda parada parece um ecrã morto. */
@media (prefers-reduced-motion: reduce){
  .roda{animation-duration:2.4s, .2s}
  *,*::before,*::after{transition-duration:.01ms !important}
}