/* ============================================================
   Tema Shop Antenas — ponte para o design system oficial
   ------------------------------------------------------------
   O sistema nasceu escuro, com variaveis proprias (--bg, --paper, --ink...).
   O design system entregue e claro: pagina #F5F5F7, cards brancos, azul de
   marca #2E2F92, vermelho racionado, Plus Jakarta Sans.

   Em vez de reescrever cada regra de app.css/painel.css, este arquivo carrega
   os tokens oficiais e REAPONTA as variaveis antigas para eles. Uma troca de
   pele: o CSS existente continua valendo e passa a falar a lingua do design
   system. Regra nova deve usar o token oficial direto (--surface-card,
   --text-body, --blue-600...), nao o apelido antigo.

   Carregar SEMPRE depois de app.css e painel.css.
   ============================================================ */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");

:root{
  color-scheme:light;

  /* superficies — exatamente dois fundos por tela: pagina e card (readme > VISUAL FOUNDATIONS) */
  --bg:var(--surface-page);
  --paper:var(--surface-card);
  --paper-2:var(--surface-sunken);
  --sunken:var(--neutral-100);
  --line:var(--border-subtle);
  --line-strong:var(--border-default);

  /* texto — a escada de contraste do design system */
  --ink:var(--text-strong);
  --ink-2:var(--text-body);
  --ink-soft:var(--text-muted);

  /* marca — azul faz o trabalho de interface; vermelho so em erro/destrutivo */
  --brand:var(--blue-600);
  --brand-deep:var(--blue-700);
  --brand-glow:var(--blue-100);
  --glow:var(--blue-100);
  --navy:var(--brand-blue);
  --teal:var(--blue-600);
  --purple:var(--blue-700);

  /* semaforo do caixa — os unicos lugares onde cor significa estado */
  --green:var(--green-600);
  --amber:var(--amber-600);
  --orange:var(--amber-700);
  --red:var(--red-600);

  --sans:var(--font-sans);
  --mono:var(--font-mono);
  --shadow:var(--shadow-xs);
}

/* o corpo passa a viver no fundo claro da pagina */
body{background:var(--bg);color:var(--ink);font-family:var(--sans)}

/* Cards: borda primeiro, sombra depois — nunca sombra pesada no lugar da borda. */
.strip .b,.block,.chart-wrap,.verdict,.cen,.card{box-shadow:var(--shadow-xs)}
.strip .b.forte{background:var(--surface-brand-soft);border-color:var(--blue-200)}
.strip .b.forte .v{color:var(--blue-700)}

/* Nav ativa: pilula azul solida com texto branco — o momento de cor mais forte da tela. */
.nav a.on,.sidebar a.on{background:var(--surface-brand);color:var(--text-on-brand)}

/* Foco visivel sempre: 1px de borda azul + anel de 3px. Nunca remover. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:none;border-color:var(--blue-600);box-shadow:var(--focus-ring)}

/* Numeros alinham em coluna (tabular-nums), como manda o design system. */
.strip .v,.cenv,.big,.metric,.sa-num{font-variant-numeric:tabular-nums}