/* Tema Material 3 do protótipo — tokens de sistema.
   Substituir pelo tema gerado no Material Theme Builder. Seed sugerida para o
   primary: verde escuro (#1B5E20). O vermelho da campanha NÃO é o primary: ele
   fica reservado para o lado Lula (--en-cor-pt), para que "vermelho" leia como
   semântica de lado e não como botão, aba ativa ou erro. Azul fica reservado
   para o adversário. Os nomes abaixo são os que o @material/web lê. */
:root {
  --md-sys-color-primary: #2e6b34;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #b3f0b5;
  --md-sys-color-on-primary-container: #002106;
  --md-sys-color-secondary: #52634f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d5e8cf;
  --md-sys-color-on-secondary-container: #101f10;
  --md-sys-color-tertiary: #8a5a00;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffdea3;
  --md-sys-color-on-tertiary-container: #2c1a00;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #fbf9f6;
  --md-sys-color-on-surface: #1c1b1b;
  --md-sys-color-surface-variant: #f0eeeb;
  --md-sys-color-on-surface-variant: #43483f;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f6f3f0;
  --md-sys-color-surface-container: #f0eeeb;
  --md-sys-color-surface-container-high: #ebe8e5;
  --md-sys-color-surface-container-highest: #e5e2df;
  --md-sys-color-outline: #73796e;
  --md-sys-color-outline-variant: #c3c8bc;
  --md-sys-color-inverse-surface: #313030;
  --md-sys-color-inverse-on-surface: #f4f0ee;

  /* Semântica própria do sistema, fora do M3. Cor de lado nunca aparece sem o
     rótulo do lado ("Lula 2ºT", "Adv."), e não se usa para mais nada. */
  --en-cor-pt: #c8102e;
  --en-cor-pt-fraca: #fbe9ec;
  --en-cor-adv: #1e3a8a;
  --en-cor-adv-fraca: #e5eaf6;
  --en-cor-2018: #7c4dff;
  --en-cor-2022: #00897b;
  --en-cor-base: #5f5b58;
  --en-cor-ensaio: #7a5a00;
  --en-cor-ensaio-fundo: #fff3cd;
  --en-cor-apuracao: #1f6f8b;
  --en-cor-apuracao-fundo: #e5eff3;
  --en-cor-degradado: #8a5a00;          /* linha com fonte "rateio" */
  --en-cor-sem-apuracao: #736d68;       /* linha sem apuração */
  --en-cor-manual-fundo: var(--md-sys-color-secondary-container); /* arrasto manual, metas customizadas */
  /* Insígnias de território (spec §3.8). Reduto usa --en-cor-pt e território
     adversário usa --en-cor-adv; as outras têm cor própria, só no mapa e nos chips. */
  --en-ins-virada: #c79100;
  --en-ins-disputado: #9c27b0;
  --en-ins-desmobilizada: #d9683b;
  --en-ins-fronteira: #00838f;
  --en-ins-vantagem: #eb9aa6;

  --md-ref-typeface-brand: 'Roboto', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Roboto', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #98d795;
    --md-sys-color-on-primary: #003911;
    --md-sys-color-primary-container: #155327;
    --md-sys-color-on-primary-container: #b3f0b5;
    --md-sys-color-secondary: #b9ccb3;
    --md-sys-color-on-secondary: #253423;
    --md-sys-color-secondary-container: #3b4b38;
    --md-sys-color-on-secondary-container: #d5e8cf;
    --md-sys-color-tertiary: #ffba4b;
    --md-sys-color-on-tertiary: #492900;
    --md-sys-color-tertiary-container: #683d00;
    --md-sys-color-on-tertiary-container: #ffdea3;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-surface: #141313;
    --md-sys-color-on-surface: #e5e2df;
    --md-sys-color-surface-variant: #2a2827;
    --md-sys-color-on-surface-variant: #c3c8bc;
    --md-sys-color-surface-container-lowest: #0f0e0e;
    --md-sys-color-surface-container-low: #1c1b1b;
    --md-sys-color-surface-container: #201f1f;
    --md-sys-color-surface-container-high: #2b2929;
    --md-sys-color-surface-container-highest: #363434;
    --md-sys-color-outline: #8d9387;
    --md-sys-color-outline-variant: #43483f;
    --md-sys-color-inverse-surface: #e5e2df;
    --md-sys-color-inverse-on-surface: #313030;

    --en-cor-pt: #ff8a80;
    --en-cor-pt-fraca: #3a1a1f;
    --en-cor-adv: #8ab4f8;
    --en-cor-adv-fraca: #1a2240;
    --en-cor-2018: #b39dff;
    --en-cor-2022: #4db6ac;
    --en-cor-base: #b5afaa;
    --en-cor-ensaio: #ffe08a;
    --en-cor-ensaio-fundo: #3d3000;
    --en-cor-apuracao: #8fcbe4;
    --en-cor-apuracao-fundo: #0e2a35;
    --en-cor-degradado: #ffba4b;
    --en-cor-sem-apuracao: #9d9792;
    --en-ins-virada: #ffd54f;
    --en-ins-disputado: #ce93d8;
    --en-ins-desmobilizada: #ffab91;
    --en-ins-fronteira: #4dd0e1;
    --en-ins-vantagem: #8e3b48;
    color-scheme: dark;
  }
}

body {
  margin: 0;
  font-family: var(--md-ref-typeface-plain);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}