/* ==========================================================
   TEMA — único arquivo a editar para trocar cores e fontes.
   Paleta: azul-marinho (confiança, autoridade) + laranja (destaque
   e compra), com neutros levemente azulados. Contrastes de texto
   seguem o WCAG AA (mínimo 4,5:1).
   ========================================================== */
:root {
  --color-primary: #1d4e89;          /* Azul-marinho: links, botões, destaques (8,4:1 com branco) */
  --color-primary-dark: #163d6b;     /* Hover dos botões */
  --color-on-primary: #ffffff;       /* Texto sobre a cor primária */
  --color-accent: #f28a35;           /* Laranja: botões de compra (CTA) e detalhes de destaque */
  --color-accent-dark: #d0772e;      /* Hover do CTA */
  --color-on-accent: #1a1405;        /* Texto sobre o laranja (7,7:1) */
  --color-bg: #ffffff;
  --color-surface: #eef1f5;          /* Faixas alternadas, cards, cabeçalho de tabela (distinto do branco) */
  --color-text: #172033;
  --color-muted: #4a5568;            /* Textos secundários (7,5:1) */
  --color-border: #c9d1dc;
  --color-focus: #0f766e;            /* Contorno de foco, sucesso e "publicado" */
  --color-cover-start: #1d4e89;      /* Gradiente de capas sem imagem */
  --color-cover-end: #0f2a4a;
  --color-hero: #0a1d3d;             /* Faixas escuras (abertura, chamadas): azul-marinho da marca */
  --color-hero-2: #1a4078;           /* Brilho azul no canto das faixas escuras */
  --color-on-hero: #f4f6fa;
  --color-on-hero-muted: #b9c6d8;
  --color-skeleton-base: #e2e7ee;    /* Cards em carregamento */
  --color-skeleton-shine: #f3f5f8;   /* Brilho que atravessa o card */
  --color-notice-bg: #fbf5e6;        /* Aviso (ex.: JavaScript desativado) */
  --color-notice-text: #6b4a0a;
  --color-danger: #b42318;           /* Mensagens de erro e ações destrutivas */
  --color-warning: #9a5b00;          /* Avisos (ex.: ação com efeito colateral) */
  color-scheme: light;

  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 12px;
  --max-width: 1100px;
}

/* ==========================================================
   MODO NOTURNO — mesmas variáveis, valores para fundo escuro.
   Azul-ardósia profundo (da mesma família do azul-marinho), menos
   cansativo que preto puro, e cores mais claras para manter o
   contraste. Vale para o site e para o painel.
   ========================================================== */
:root[data-theme="dark"] {
  --color-primary: #8db7f2;
  --color-primary-dark: #b0cdf6;     /* Hover dos botões (clareia no escuro) */
  --color-on-primary: #0b1220;
  --color-accent: #f59a4f;
  --color-accent-dark: #f8b27a;
  --color-on-accent: #1a1405;
  /* Três níveis bem distintos: fundo, superfície (cartões/faixas) e borda. */
  --color-bg: #0b1424;
  --color-surface: #12203a;
  --color-text: #e8edf5;
  --color-muted: #a3b1c6;
  --color-border: #2a3f66;
  --color-focus: #4cc9b0;
  --color-cover-start: #1d4e89;
  --color-cover-end: #0b2340;
  --color-hero: #0a1d3d;             /* Mesmo azul do modo claro: a abertura fica mais clara que o fundo, não preta */
  --color-hero-2: #1a4078;
  --color-on-hero: #f4f6fa;
  --color-on-hero-muted: #b9c6d8;
  --color-skeleton-base: #15223b;
  --color-skeleton-shine: #1d2d4b;
  --color-notice-bg: #332c1a;
  --color-notice-text: #f3d38a;
  --color-danger: #f28b82;
  --color-warning: #efbe56;
  color-scheme: dark;
}