/* Camada de papéis do app sobre o design system Celere v1 (static/ds/v1, ADR-0006).

   As cores, fontes, raios e sombras vêm dos tokens do DS. Este arquivo só dá a eles os nomes que o CSS do app
   já usa e define a escala densa de app, como a amostra patterns/app-shell. Aqui não entra cor nova: um hex
   ou uma família tipográfica fora do DS é sinal de que algo devia virar token lá.

   Tema escuro: a classe `dark` no <html> (static/js/base.js) aplica o bloco `.dark` do DS, que troca os
   papéis de superfície, texto e borda. A paleta de marca (--celere-*) não muda entre os temas. */

:root{
  /* superfícies, texto e borda */
  --surface: var(--surface-raised);
  --surface-2: var(--surface-sunken);
  --heading: var(--text-primary);
  --text: var(--text-secondary);
  --text-muted: var(--text-tertiary);
  --border: var(--border-subtle);
  --header-bg: var(--surface-raised);

  /* marca: teal de destaque e teal de texto (o teal puro não passa AA em texto pequeno) */
  --teal: var(--celere-teal);
  --teal2: var(--celere-teal-deep);

  /* forma: só os três raios e as duas sombras do DS */
  --shadow-card: var(--shadow-s);
  --shadow-card-hover: var(--shadow-m);
  --radius-lg: var(--radius-m);
  --radius-md: var(--radius-m);
  --radius-sm: var(--radius-s);

  /* texto com sentido, pela regra de sinal do DS: erro (vermelho), desvio adverso e aviso (laranja de texto),
     favorável (teal). O sinal nunca depende só da cor: o texto ou o número com sinal acompanha sempre. */
  --texto-erro: var(--celere-danger-text);
  --texto-aviso: var(--celere-orange-text);
  --texto-favoravel: var(--celere-teal-deep);

  /* escala densa de app: os tamanhos de --text-hero/--text-h2 do DS são de site, não de tela de trabalho */
  --app-titulo: 1.375rem;
  --app-secao: 1.25rem;
}

/* No escuro, os tons "deep" e "text" do DS (feitos para fundo claro) não passam AA sobre ink; o texto usa
   os tons de marca, que passam. Os fundos ghost continuam claros, com texto ink, como nos alertas do DS. */
.dark{
  --teal2: var(--celere-teal);
  --texto-erro: var(--celere-danger-ghost);
  --texto-aviso: var(--celere-orange);
  --texto-favoravel: var(--celere-teal);
}