/* ===================================================================
 * brand.css — fonte canônica dos tokens de identidade visual da
 * D'Accord Domus. Carregado ANTES do CSS específico de cada
 * superfície (admin/painel/Formulário).
 *
 * Cópia sincronizada manualmente em Formulario/brand.css — o Worker
 * do Cloudflare só serve arquivos dentro de Formulario/, não alcança
 * este arquivo. Se mudar aqui, mude lá também (mesmo padrão manual já
 * usado pra manter Formulario/2.js sincronizado com o motor do
 * backend — não existe build step comum entre os dois hoje).
 *
 * Paleta clara por padrão; resposta a prefers-color-scheme: dark é
 * SELETIVA (só cabeçalho e bloco de destaque invertem — cartões,
 * tabelas e formulários continuam em papel sempre). Sem seletor
 * manual de tema, sem JS.
 *
 * --brand-line e --brand-muted não tinham valor explícito no spec
 * aprovado — confirmados na validação visual: --brand-line usa o
 * mesmo tom das divisórias decorativas (#DDD3C4, não o bordô do
 * monograma), --brand-muted = texto secundário (#5B6570).
 *
 * Contraste calculado e confirmado: bordô sobre ink = 1,80:1 (RUIM).
 * NUNCA usar --brand-bordo como texto/ícone sobre um fundo
 * --brand-ink (ou vice-versa) em nenhum componente.
 * =================================================================== */
:root {
  /* ---- Marca ---- */
  --brand-ink: #1E2A32;
  --brand-bordo: #8C2F39;
  --brand-paper: #FAF7F2;
  --brand-paper-dark: #1E2A32; /* "papel" em contexto invertido (cabeçalho/destaque no dark) */
  --brand-line: #DDD3C4;       /* confirmado — mesmo tom de --border-subtle */
  --brand-muted: #5B6570;      /* confirmado — mesmo tom de --text-secondary */

  /* ---- Interface ---- */
  --page-bg: #FAF7F2;
  --surface-bg: #F1EAE0;
  --text-primary: #1E2A32;
  --text-secondary: #5B6570;
  --border-subtle: #DDD3C4;   /* divisórias decorativas */
  --border-control: #8A8074;  /* borda de campos/controles */
  --action-bg: #8C2F39;
  --action-bg-hover: #742630;
  --action-text: #FAF7F2;
  --link: #8C2F39;
  --focus-ring: #8C2F39;      /* sobre papel — vira --brand-paper sobre fundo invertido, ver .brand-invertido */

  /* Cabeçalho — muda com o esquema do SO (ver media query abaixo) */
  --header-bg: #FAF7F2;
  --header-text: #1E2A32;
  --header-text-secondary: #5B6570;

  /* Bloco de destaque — muda com o esquema do SO */
  --destaque-bg: #F1EAE0;
  --destaque-text: #8C2F39;

  /* ---- Estados (texto/ícone, fundo) ---- */
  --estado-sucesso-fg: #246344;
  --estado-sucesso-bg: #E5EEE6;
  --estado-aviso-fg: #805600;
  --estado-aviso-bg: #F4E8CC;
  --estado-erro-fg: #9C3030;
  --estado-erro-bg: #F4E1DE;
  --estado-info-fg: #315D78;
  --estado-info-bg: #E4EBEF;
  --estado-esclarecer-fg: #675080;
  --estado-esclarecer-bg: #ECE6F1;

  /* Tokens de gráfico — mesma paleta de estado, nomeada pro uso em séries */
  --grafico-1: #8C2F39;
  --grafico-2: #315D78;
  --grafico-3: #246344;
  --grafico-4: #805600;
  --grafico-5: #675080;

  /* Tipografia */
  --fonte-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-marca: 'Fraunces', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-bg: #1E2A32;
    --header-text: #FAF7F2;
    --header-text-secondary: #C9C2B8;
    --destaque-bg: #8C2F39;
    --destaque-text: #FAF7F2;
    --focus-ring: #FAF7F2; /* dentro de região invertida (cabeçalho/destaque) */
  }
}

/* Link sobre região invertida (cabeçalho/destaque no dark) — sempre
   sublinhado, nunca só cor, pra não depender de contraste de cor sozinho. */
.brand-invertido a {
  color: var(--brand-paper);
  text-decoration: underline;
}