/* Tema "Sereno": papel neutro, tinta grafite-azulada e um único azul calmo como destaque.
   Sem marca-texto: seleção, hover e item ativo usam um azul bem claro, para a tela cansar menos.
   Fonte: a do próprio sistema (Roboto no Android, San Francisco no iPhone e no Mac, Segoe UI no Windows),
   já otimizada para cada tela e sem download.
   Para trocar o visual: copie este arquivo para temas/<nome>.css, ajuste as variáveis
   e aponte o <link id="css-tema"> de index.html para ele. Nenhum outro arquivo precisa mudar. */

:root {
  --bg-page: #f5f6f8;
  --bg-surface: #ffffff;
  --bg-elevated: #f0f2f5;
  --bg-subtle: #e4e8ee;
  --bg-input: #ffffff;

  --ink-primary: #1f2733;
  --ink-secondary: #465161;
  --ink-muted: #5d6878;

  --border-soft: #e2e6ec;
  --border-strong: #c3cad4;

  --accent: #2b5d9b;
  --accent-hover: #234d82;
  --accent-soft: #eaf1fa;
  --on-accent: #ffffff;

  /* realce de hover/seleção (antes um marca-texto) e detalhe de marca */
  --destaque: #e3ecf8;
  --destaque-texto: #1f2733;
  --ambar: #2b5d9b;
  --ambar-texto: #2b5d9b;

  --ok: #1d6b45;
  --ok-bg: #e8f4ee;
  --ok-border: #a7d3bb;

  --warn: #8a5a12;
  --warn-bg: #fbf2e2;
  --warn-border: #e5c48d;

  --danger: #a3361d;
  --danger-bg: #fcebe6;
  --danger-border: #eab3a3;

  /* gráficos do Desempenho: azul (certas) e laranja (erradas), conferidos para daltonismo e contraste */
  --graf-acerto: #2a7fc4;
  --graf-erro: #e2733f;
  --graf-linha: #2b5d9b;
  --graf-barra: #465161;
  --graf-grade: #e9ecf1;

  --shadow-sm: 0 1px 2px rgba(31, 39, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 39, 51, 0.10);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --trans-fast: 0.15s ease;

  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}

html[data-tema="escuro"] {
  --bg-page: #14181d;
  --bg-surface: #1c2128;
  --bg-elevated: #232a32;
  --bg-subtle: #2c343e;
  --bg-input: #14181d;

  --ink-primary: #e7eaee;
  --ink-secondary: #b9c1cb;
  --ink-muted: #8f99a6;

  --border-soft: #2c343e;
  --border-strong: #46505c;

  --accent: #8ab4ea;
  --accent-hover: #a8c7f0;
  --accent-soft: #1f2c3d;
  --on-accent: #10151b;

  --destaque: #24334a;
  --destaque-texto: #e7eaee;
  --ambar: #8ab4ea;
  --ambar-texto: #8ab4ea;

  --ok: #7fcfa2;
  --ok-bg: #18302a;
  --ok-border: #2f5a46;

  --warn: #e8bd78;
  --warn-bg: #33291a;
  --warn-border: #67502c;

  --danger: #f09a85;
  --danger-bg: #3a221c;
  --danger-border: #6e3a2e;

  --graf-acerto: #3f8ccc;
  --graf-erro: #e0703f;
  --graf-linha: #8ab4ea;
  --graf-barra: #b9c1cb;
  --graf-grade: #2a313a;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
}