/**
 * Tokens de cor e superfície — tema claro (padrão alinhado ao painel Magazine dos Pés).
 *
 * Dark mode opcional (futuro): duplique este bloco sob um seletor de escopo, por exemplo:
 *   html[data-theme="dark"] { ...mesmas variáveis com valores escuros... }
 * ou carregue um segundo arquivo `themes/dark.css` só quando o usuário escolher.
 * O ponto único a manter é: todas as cores usadas nos outros CSS devem vir destas
 * variáveis — assim trocar tema = sobrescrever :root ou [data-theme].
 */
:root {
  /* Marca */
  --marca-azul: #003399;
  --marca-laranja: #f47920;
  --marca-laranja-hover: #d96910;

  /* Superfícies (claro) */
  --surface-page: #f8fafc;
  --surface-card: #ffffff;
  --surface-tab-bar: #ffffff;
  --border-subtle: #e2e8f0;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-header: 0 4px 14px rgba(0, 51, 153, 0.22);

  /* Texto */
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-on-brand: #ffffff;

  /* Ações */
  --action-success: #15803d;
  --action-success-hover: #166534;
  --action-danger: #b91c1c;
  --action-danger-hover: #991b1b;

  /* Header / abas (derivados) */
  --header-accent-border: var(--marca-laranja);
  --tab-active: var(--marca-laranja);
  --tab-hover: var(--marca-azul);

  /* Raio */
  --radius-input: 8px;
  --radius-card: 12px;

  /* Tipografia */
  --font-sans: var(--font-body, 'Montserrat', sans-serif);
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
  --font-size-body: 14px;
  --line-height-body: 1.5;

  /* Layout */
  --header-height: 68px;
  --subbar-height: 46px;
  --content-max-width: 1600px;
  --content-padding: 1.5rem;
}