/*
 * Tema da Central Calunaty — ÚNICO lugar com valores de identidade visual.
 *
 * Esta é uma identidade PROVISÓRIA (azul petróleo). A definitiva será trazida depois e trocada
 * apenas aqui: app.css usa somente var(--...), sem nenhuma cor, fonte ou medida de marca literal.
 *
 * ATENÇÃO — manter em sincronia com estes valores (não leem CSS):
 *   - static/manifest.webmanifest  -> "theme_color"      = --cor-primaria   (#0b4f6c)
 *                                     "background_color" = --cor-fundo      (#f3f7f9)
 *   - static/index.html            -> <meta name="theme-color"> = --cor-primaria (#0b4f6c)
 *   - scripts/gen-icons.mjs        -> cores dos ícones PNG/SVG (rode `npm run icons` depois de trocar)
 *   - static/icons/favicon.svg     -> gerado pelo script acima
 */

:root {
  color-scheme: light dark;

  /* Marca */
  --cor-primaria: #0b4f6c;
  --cor-primaria-escura: #083a50;
  --cor-primaria-clara: #d9ebf3;
  --cor-acento: #c2571a;
  --cor-sobre-primaria: #ffffff;
  --cor-sobre-erro: #ffffff;
  --cor-cabecalho-fundo: var(--cor-primaria);
  --cor-cabecalho-texto: var(--cor-sobre-primaria);
  --cor-cabecalho-borda: var(--cor-primaria-escura);

  /* Superfícies e texto */
  --cor-fundo: #f3f7f9;
  --cor-superficie: #ffffff;
  --cor-superficie-alt: #eaf1f5;
  --cor-texto: #14242d;
  --cor-texto-suave: #4a5d69;
  --cor-borda: #cfdbe2;
  --cor-borda-forte: #8fa5b2;
  --cor-link: #0b4f6c;
  --cor-foco: #e08a00;
  --cor-sobreposicao: rgba(8, 26, 36, 0.55);
  --cor-transparente: transparent;

  /* Estados */
  --cor-erro: #b3261e;
  --cor-erro-fundo: #fdecea;
  --cor-sucesso: #1b6e3c;
  --cor-sucesso-fundo: #e4f4ea;
  --cor-aviso: #8a5a00;
  --cor-aviso-fundo: #fff4d6;
  --cor-info: #0b4f6c;
  --cor-info-fundo: #e1f0f6;

  /* QR code: sempre escuro sobre claro, nos dois temas (leitores exigem contraste alto) */
  --cor-qr-fundo: #ffffff;
  --cor-qr-modulo: #000000;

  /* Gráfico (4 séries; contraste mínimo 3:1 contra o fundo) */
  --cor-grafico-1: #0b4f6c;
  --cor-grafico-2: #c2571a;
  --cor-grafico-3: #2a8f84;
  --cor-grafico-4: #7b5ea7;
  --cor-grafico-grade: #dbe5ea;
  --cor-grafico-eixo: #8fa5b2;
  --cor-grafico-texto: #4a5d69;

  /* Tipografia (pilha do sistema; nada de fonte externa) */
  --fonte-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --tamanho-base: 1rem;
  --tamanho-pequeno: 0.875rem;
  --tamanho-titulo: 1.5rem;
  --tamanho-subtitulo: 1.125rem;
  --altura-linha: 1.5;
  --peso-forte: 600;

  /* Forma e profundidade */
  --raio: 0.5rem;
  --raio-grande: 0.75rem;
  --raio-pequeno: 0.25rem;
  --raio-pilula: 999px;
  --sombra: 0 1px 2px rgba(8, 26, 36, 0.08), 0 2px 8px rgba(8, 26, 36, 0.06);
  --sombra-forte: 0 8px 28px rgba(8, 26, 36, 0.25);
  --espessura-foco: 3px;

  /* Espaçamento */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;

  /* Medidas */
  --largura-max: 72rem;
  --largura-estreita: 28rem;
  --alvo-toque: 2.75rem;
  --altura-cabecalho: 3.5rem;
  --transicao: 120ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-primaria: #5db3d4;
    --cor-primaria-escura: #8ccbe3;
    --cor-primaria-clara: #123646;
    --cor-acento: #f0944f;
    --cor-sobre-primaria: #06222f;
    --cor-sobre-erro: #2a0a08;
    --cor-cabecalho-fundo: #10222b;
    --cor-cabecalho-texto: #e5eef2;
    --cor-cabecalho-borda: #2a414d;

    --cor-fundo: #0c171d;
    --cor-superficie: #14232b;
    --cor-superficie-alt: #1a2f39;
    --cor-texto: #e5eef2;
    --cor-texto-suave: #a9bcc6;
    --cor-borda: #2a414d;
    --cor-borda-forte: #5b7685;
    --cor-link: #7cc4e0;
    --cor-foco: #ffb84d;
    --cor-sobreposicao: rgba(0, 0, 0, 0.65);

    --cor-erro: #ff8a80;
    --cor-erro-fundo: #3a1a18;
    --cor-sucesso: #6fd596;
    --cor-sucesso-fundo: #14301f;
    --cor-aviso: #ffcb6b;
    --cor-aviso-fundo: #35280a;
    --cor-info: #7cc4e0;
    --cor-info-fundo: #12303c;

    --cor-grafico-1: #5db3d4;
    --cor-grafico-2: #f0944f;
    --cor-grafico-3: #52c2b4;
    --cor-grafico-4: #b49be0;
    --cor-grafico-grade: #254150;
    --cor-grafico-eixo: #5b7685;
    --cor-grafico-texto: #a9bcc6;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --sombra-forte: 0 8px 28px rgba(0, 0, 0, 0.6);
  }
}