/* Gerenciador de tema — tokens de cor, forma e sombra.
   Única fonte de cores da interface: style.css, theme.css e os modais só leem estas variáveis.
   O tema ativo vem de <html data-theme="…">, definido por static/js/theme-manager.js.

   Novo tema / coloração:
     - em CSS: um bloco :root[data-theme="nome"] { … } redefinindo só o que muda
       (ex.: a escala --zee-brand-* para outra cor de marca) + ZeeTheme.register('nome');
     - em JS: ZeeTheme.register('nome', { label, scheme, tokens: { '--zee-brand-900': '#…' } }).
   Tema escuro: redefinir neutros (--zee-surface*, --zee-bg, --zee-text*, --zee-border*),
   --zee-backdrop e as sombras, com scheme: 'dark'. */

:root,
:root[data-theme="claro"] {
  color-scheme: light;

  /* Escala da marca — trocar estes valores muda a cor de toda a interface. */
  --zee-brand-900: #0f5e3a;
  --zee-brand-800: #146c43;
  --zee-brand-700: #1b7a4b;
  --zee-brand-200: #cfe5d8;
  --zee-brand-100: #e7f3ec;
  --zee-brand-50: #f3f9f5;

  /* Neutros */
  --zee-text: #1d2a24;
  --zee-text-muted: #5b6b63;
  --zee-text-faint: #8a978f;
  --zee-border: #e1e7e3;
  --zee-border-strong: #c9d3cd;
  --zee-surface: #ffffff;
  --zee-surface-muted: #f6f8f7;
  --zee-surface-glass: rgba(255, 255, 255, 0.92);
  --zee-bg: #eef2ef;

  /* Semânticos */
  --zee-primary: var(--zee-brand-900);
  --zee-primary-hover: var(--zee-brand-800);
  --zee-on-primary: #ffffff;
  --zee-accent: var(--zee-brand-700);
  --zee-accent-strong: var(--zee-brand-800);
  --zee-accent-soft: var(--zee-brand-50);
  --zee-accent-muted: var(--zee-brand-100);
  --zee-accent-border: var(--zee-brand-200);
  --zee-selection: color-mix(in srgb, var(--zee-brand-700) 14%, transparent);
  --zee-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zee-brand-700) 18%, transparent);

  --zee-danger: #c0392b;
  --zee-danger-soft: color-mix(in srgb, var(--zee-danger) 9%, transparent);
  --zee-success: #1e7a46;
  --zee-warning: #b7791f;
  --zee-info: var(--zee-brand-700);
  --zee-badge-alert: #8b0000;

  /* Destaque temporário (feição clicada na legenda/tabela) */
  --zee-flash: rgb(212, 167, 38);

  /* Modais e janelas */
  --zee-backdrop: rgba(12, 28, 20, 0.45);
  --zee-backdrop-blur: 3px;

  /* Forma */
  --zee-radius-lg: 12px;
  --zee-radius: 10px;
  --zee-radius-sm: 6px;
  --zee-radius-xs: 5px;

  /* Sombras */
  --zee-shadow-sm: 0 1px 2px rgba(16, 40, 28, 0.08);
  --zee-shadow: 0 4px 14px rgba(16, 40, 28, 0.08), 0 1px 2px rgba(16, 40, 28, 0.06);
  --zee-shadow-lg: 0 12px 36px rgba(16, 40, 28, 0.16), 0 2px 4px rgba(16, 40, 28, 0.08);

  --zee-font: 'Open Sans', sans-serif;
}

/* Tema escuro — só neutros, tons claros da marca, fundo de modal e sombras mudam. */
:root[data-theme="escuro"] {
  color-scheme: dark;

  --zee-brand-700: #3fa872;
  --zee-brand-800: #4fbb83;
  --zee-brand-200: #2c5a43;
  --zee-brand-100: #1f3a2d;
  --zee-brand-50: #1a2e24;

  --zee-text: #e4ece7;
  --zee-text-muted: #a3b2aa;
  --zee-text-faint: #75847c;
  --zee-border: #2c3832;
  --zee-border-strong: #3c4a43;
  --zee-surface: #18201c;
  --zee-surface-muted: #1f2924;
  --zee-surface-glass: rgba(24, 32, 28, 0.92);
  --zee-bg: #111714;

  /* Notiflix usa texto branco sobre o "info" — usa o tom escuro da marca. */
  --zee-info: var(--zee-brand-900);

  --zee-backdrop: rgba(0, 0, 0, 0.6);

  --zee-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --zee-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --zee-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Cores do sistema (<html data-color>, escolhidas em Configurações > Layout do sistema).
   Verde = escalas acima. Cada cor nova: um bloco claro + um bloco escuro, e entrada em
   COLORS (theme-manager.js). */
/* Azul da logomarca ZEE-RR (~#00a8f0), escurecido no 900 p/ contraste com texto branco. */
:root[data-color="azul"] {
  --zee-brand-900: #0075bb;
  --zee-brand-800: #0088d4;
  --zee-brand-700: #009de6;
  --zee-brand-200: #bfe5f8;
  --zee-brand-100: #e0f3fc;
  --zee-brand-50: #f0f9fe;
}

:root[data-theme="escuro"][data-color="azul"] {
  --zee-brand-900: #0075bb;
  --zee-brand-800: #4cc3f5;
  --zee-brand-700: #2bb5f0;
  --zee-brand-200: #1f4560;
  --zee-brand-100: #173548;
  --zee-brand-50: #132a3a;

  --zee-text: #e3e9f0;
  --zee-text-muted: #a2afbd;
  --zee-text-faint: #74818f;
  --zee-border: #2a3440;
  --zee-border-strong: #3a4654;
  --zee-surface: #161d26;
  --zee-surface-muted: #1d2631;
  --zee-surface-glass: rgba(22, 29, 38, 0.92);
  --zee-bg: #10151c;
}