/* static/css/tokens.css — as decisões visuais do SMAIF, num lugar só.
 *
 * Todo o resto do CSS consome estas variáveis; código hex só existe aqui
 * (o teste mapa/tests/test_design_system.py conta os que sobram fora).
 * Trocar uma cor do sistema = trocar uma linha deste arquivo.
 *
 * Três camadas:
 *   1. Marca e escalas fixas — as 6 cores do Manual de Marca v1.1, fases da
 *      ocorrência, escala de risco. Não mudam com o tema.
 *   2. Papéis — o que um componente usa (--surface, --text-muted, --accent…).
 *      Cada tema dá um valor para cada papel.
 *   3. Medidas — fonte, tamanhos, espaçamento, raio, sombra.
 *
 * Tema: o <html> recebe data-theme="light" | "dark" (preferência do usuário;
 * "auto" é resolvido para um dos dois por um script de 2 linhas no <head>).
 * Um trecho que precisa ser sempre claro (documento para imprimir) usa a
 * classe .theme-light; o inverso, .theme-dark.
 *
 * Contraste: todo par texto/fundo dos papéis abaixo passa de 4,5:1 (WCAG AA
 * para texto pequeno) — conferido em 18/09/2026. Ao mudar um valor, confira
 * de novo: o cinza "fraco" antigo (#94a3b8) tinha 2,6:1 e as legendas de
 * tabela eram ilegíveis ao sol.
 */

/* ── 1. Marca e escalas fixas ────────────────────────────────────────────── */
:root {
  /* Manual de Marca v1.1. O verde domina; o laranja é acento de alerta,
     nunca cor principal. Componente não usa --brand-* direto: usa o papel. */
  --brand-forest:       #063D2C;  /* Verde Floresta Profundo */
  --brand-green:        #147A43;  /* Verde Ambiental */
  --brand-green-bright: #57A865;  /* Verde Vivo de Contraste */
  --brand-orange:       #E85A13;  /* Laranja Alerta */
  --brand-night:        #061B18;  /* Fundo Escuro */
  --brand-offwhite:     #F4F6F1;  /* Off-white Natural */

  /* Fases da ocorrência — fonte única (dashboard, mapa, ROI, gestão).
     Verde enquanto sob controle, laranja no pico de urgência, verde
     profundo ao resolver; os intermediários são variações do Laranja Alerta.
     "Extinto" (--fase-dead) muda com o tema: o verde floresta some no fundo
     escuro — está nos blocos de papéis abaixo. */
  --fase-detected:   #57A865;
  --fase-observing:  #147A43;
  --fase-dispatched: #F0813A;
  --fase-combat:     #E85A13;
  --fase-aftermath:  #B0451A;

  /* Escala de risco (Nulo → Muito Alto). Espelha mapa/riscos.py::NIVEIS —
     o teste confere que os dois continuam iguais. Verde→vermelho é a
     convenção de perigo de incêndio que o brigadista já conhece. */
  --risk-0: #16a34a;
  --risk-1: #84cc16;
  --risk-2: #eab308;
  --risk-3: #f97316;
  --risk-4: #dc2626;

  /* Texto sobre preenchimento claro/saturado (fase "detectado", "em combate"):
     o branco não passa de 3,6:1 ali; o Fundo Escuro passa de 5:1. */
  --on-bright: #061B18;

  /* Documento para papel (impressão do ROI): tinta preta e cinzas, iguais
     nos dois temas — imprime bem em preto e branco e na copiadora. */
  --doc-ink:        #000000;
  --doc-ink-soft:   #444444;
  --doc-label:      #555555;
  --doc-muted:      #777777;
  --doc-line:       #999999;
  --doc-line-soft:  #cccccc;
  --doc-fill:       #222222;  /* faixa de título de seção, caixa marcada */
  --doc-fill-soft:  #eeeeee;
  --doc-th:         #dddddd;

  /* Mapa (cartografia sobre imagem de satélite — igual nos dois temas).
     Cores de dado geográfico, lidas pelo mapa.js via mapColor('water') etc. */
  --map-bg:          #061B18;  /* fundo enquanto os tiles carregam */
  --map-focus:       #57A865;
  --map-label-bg:    rgba(255, 255, 255, .95);  /* rótulo sobre o satélite */
  --map-label-ink:   #000000;
  --map-ruler:       #e5b800;  /* régua de medir */
  --map-draw:        #3388ff;  /* traço padrão do Leaflet.Draw */
  --map-draw-area:   #E85A13;  /* área desenhada (cicatriz) */
  --map-draw-path:   #2ecc71;  /* caminho desenhado */
  --map-cicatriz:    #B0451A;  /* contorno da cicatriz detectada no Sentinel */
  --map-edit:        #38bdf8;  /* reposicionar, posição original */
  --map-edit-fill:   #0ea5e9;
  --map-water:       #38bdf8;  /* hidrografia: azul é convenção cartográfica */
  --map-car:         #8B8F8A;  /* imóvel do CAR: neutro, não disputa com fogo nem com UC */
  --map-municipio:   #D9DED6;  /* divisa municipal: tracejado claro */
  --map-coverage:    #3b82f6;  /* cobertura de câmera */
  /* UC por esfera: verde da marca, do mais restritivo (federal) ao mais local.
     Laranja fica reservado ao fogo. */
  --map-uc-federal:    #063D2C;
  --map-uc-estadual:   #147A43;
  --map-uc-municipal:  #57A865;
  --map-uc-particular: #8FBF9F;
  --map-uc-outra:      #94a3b8;
  /* Foco no mapa: cor pelo risco enquanto o fogo está de pé; marrom em
     extinção, grafite quando extinto. Alerta (triangulação, satélite a
     confirmar) é o Laranja Alerta. */
  --map-fogo-no_risk:  #3b82f6;
  --map-fogo-low:      #16a34a;
  --map-fogo-medium:   #eab308;
  --map-fogo-high:     #dc2626;
  --map-fogo-aftermath:#92400e;
  --map-fogo-dead:     #1f2937;
  --map-fogo-alerta:   #E85A13;
  --map-queima-planejada:  #3b82f6;
  --map-queima-iniciada:   #f97316;
  --map-queima-finalizada: #16a34a;
  --map-camada:       #147A43;  /* camada do usuário sem cor escolhida */
  --map-referencia:    #063D2C;  /* pontos salvos do usuário (casa, água, torre…) */
  --map-brigadista:    #1d4ed8;  /* posição do brigadista (rastreador) */
  /* Pontos marcados em campo pelo SMAIF Maps, por tipo */
  --map-ponto-foco:          #ef4444;
  --map-ponto-extinto:       #22c55e;
  --map-ponto-fogo_sub:      #d97706;
  --map-ponto-agua:          #38bdf8;
  --map-ponto-personalizado: #ec4899;
  --map-ponto-rescaldo:      #f97316;
  --map-ponto-aceiro:        #a16207;
  --map-ponto-obstaculo:     #7c3aed;
  --map-ponto-obs:           #0ea5e9;
  /* Canais de cor da composição Sentinel (R, G, B) */
  --map-ch-r:        #ef4444;
  --map-ch-g:        #22c55e;
  --map-ch-b:        #60a5fa;
  /* Idade do foco de satélite: hoje → 4+ dias (vermelho esfriando para âmbar) */
  --map-age-0:       #ef4444;
  --map-age-1:       #f97316;
  --map-age-2:       #f59e0b;
  --map-age-3:       #eab308;
  --map-age-4:       #a16207;

  /* Bloco de código/script para copiar (instalação, token): escuro nos dois
     temas, como terminal — é o que o operador reconhece como "cole isto". */
  --code-bg: #061B18;
  --code-text: #E6ECE7;

  /* Barra de navegação: verde floresta nos dois temas (é a assinatura). */
  --navbar-bg: var(--brand-forest);
  --navbar-text: #ffffff;
  --navbar-accent: var(--brand-green-bright);
  --navbar-hover: rgba(255, 255, 255, .09);
  --navbar-active: rgba(255, 255, 255, .15);
  --navbar-h: 60px;
}

/* ── 2. Papéis: tema claro (padrão) ─────────────────────────────────────── */
:root,
.theme-light {
  color-scheme: light;

  --bg:             #F4F6F1;  /* fundo da página (Off-white Natural) */
  --surface:        #ffffff;  /* card, painel, tabela */
  --surface-2:      #F8FAF7;  /* linha em hover, faixa, cabeçalho de tabela */
  --surface-sunken: #EEF2EC;  /* trilho de barra, campo desabilitado */
  --border:         #DDE4DB;
  --border-strong:  #C4CEC3;  /* borda de campo, divisória que precisa aparecer */

  --text:           #061B18;
  --text-soft:      #3A4A44;  /* rótulo de campo, item de menu */
  --text-muted:     #52635B;  /* subtítulo, texto de apoio */
  --text-faint:     #627169;  /* legenda pequena em caixa-alta, placeholder */
  --heading:        #063D2C;  /* manual: fundo claro pede verde escuro */
  --fase-dead:      #063D2C;  /* ocorrência extinta: Verde Floresta Profundo */

  --accent:         #147A43;  /* botão primário, item ativo */
  --accent-strong:  #063D2C;  /* hover do primário */
  --accent-text:    #147A43;  /* link, número positivo */
  --accent-soft:    #E7F3EA;  /* fundo de selo/aviso verde, item ativo do menu */
  --accent-border:  #A7D7B8;
  --on-accent:      #ffffff;

  --alert:          #E85A13;  /* fogo, risco, atenção — acento, nunca fundo de área */
  --alert-text:     #B8440C;  /* laranja legível em texto pequeno (o puro dá 3,6:1) */
  --alert-soft:     #FFF1E8;
  --alert-border:   #FDBA74;

  --danger:         #DC2626;  /* excluir, erro — não é fogo, por isso não é laranja */
  --danger-text:    #B91C1C;
  --danger-soft:    #FEF2F2;
  --danger-border:  #FECACA;

  --info:           #1D4ED8;  /* informação neutra, água/chuva nos gráficos */
  --info-soft:      #EFF6FF;
  --info-border:    #BFDBFE;

  --input-bg:       #ffffff;
  --focus-ring:     0 0 0 3px rgba(20, 122, 67, .22);
  --shadow-sm:      0 1px 3px rgba(6, 27, 24, .06);
  --shadow-md:      0 4px 16px rgba(6, 27, 24, .10);
  --overlay:        rgba(6, 27, 24, .55);  /* fundo de modal */

  /* Gráficos (Chart.js, via SMAIF.chartTheme() em static/js/charts.js).
     Categórica em ordem fixa, nunca cicla: verde da marca abre; o laranja só
     em 3º porque verde↔laranja colam sob protanopia. Validada com o validador
     da skill dataviz sobre #ffffff: aqua, amarelo e rosa ficam abaixo de 3:1 —
     a tabela-irmã de cada gráfico é o alívio obrigatório. */
  --chart-1: #147A43;
  --chart-2: #2a78d6;
  --chart-3: #E85A13;
  --chart-4: #1baf7a;
  --chart-5: #eda100;
  --chart-6: #e87ba4;
  --chart-7: #4a3aa7;
  --chart-8: #e34948;
  --chart-grid: #EAEFE8;
  --chart-ink: #52635B;
  --chart-tooltip-bg: #061B18;
  --chart-tooltip-text: #F4F6F1;
}

/* ── 2. Papéis: tema escuro ─────────────────────────────────────────────── */
:root[data-theme="dark"],
.theme-dark {
  color-scheme: dark;

  --bg:             #061B18;  /* Fundo Escuro da marca */
  --surface:        #0B2A24;
  --surface-2:      #0F3129;
  --surface-sunken: #04130F;
  --border:         #1D4038;
  --border-strong:  #2B5448;

  --text:           #E6ECE7;
  --text-soft:      #C2D0C8;
  --text-muted:     #9DB1A8;
  --text-faint:     #8FA39A;
  --heading:        #F4F6F1;  /* manual: fundo escuro pede off-white */
  --fase-dead:      #45786A;  /* o floresta sumia no fundo escuro */

  --accent:         #147A43;
  --accent-strong:  #0E5C33;  /* hover: escurece (clarear derruba o branco para 4,1:1) */
  --accent-text:    #57A865;  /* Verde Vivo: "destaques sobre fundo escuro" */
  --accent-soft:    #0C3121;
  --accent-border:  #2A6B45;
  --on-accent:      #ffffff;

  --alert:          #E85A13;
  --alert-text:     #F0813A;
  --alert-soft:     #3A1C0D;
  --alert-border:   #7A3412;

  --danger:         #DC2626;  /* o #EF4444 mais claro não segura o texto branco do botão */
  --danger-text:    #F87171;
  --danger-soft:    #3B1414;
  --danger-border:  #7F1D1D;

  --info:           #93C5FD;
  --info-soft:      #0F2340;
  --info-border:    #1E3A8A;

  --input-bg:       #061B18;
  --focus-ring:     0 0 0 3px rgba(87, 168, 101, .35);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, .45);
  --overlay:        rgba(0, 0, 0, .65);

  /* Mesmos oito tons, clareados para a superfície escura (#0B2A24): passam
     em todas as checagens do validador, inclusive ≥ 3:1 de contraste. */
  --chart-1: #57A865;
  --chart-2: #3987e5;
  --chart-3: #E85A13;
  --chart-4: #199e70;
  --chart-5: #c98500;
  --chart-6: #d55181;
  --chart-7: #9085e9;
  --chart-8: #e66767;
  --chart-grid: #16382F;
  --chart-ink: #9DB1A8;
  --chart-tooltip-bg: #F4F6F1;
  --chart-tooltip-text: #061B18;
}

/* ── 3. Medidas ─────────────────────────────────────────────────────────── */
:root {
  /* Manual: Montserrat; alternativos autorizados. Nunca serifada nem
     condensada. Mono só para dado técnico (coordenada, hash, código). */
  --font-sans: 'Montserrat', 'Poppins', 'Noto Sans', 'DejaVu Sans', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  --fs-2xs: 10px;   /* legenda em caixa-alta */
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  13px;   /* corpo de tabela e formulário */
  --fs-base: 14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;   /* título de página */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 6px;   /* campo, botão pequeno */
  --radius-md: 8px;   /* botão, aviso */
  --radius-lg: 12px;  /* card, painel */
  --radius-pill: 999px;

  --icon-size: 1.15em;
}