/*
  Tokens do tema do Maplugo: cores da marca (marinho #0A2350 e laranja #FF6B00), fundos, textos, bordas, estados,
  sombras, raios e tipografia. O tema claro é o padrão; o escuro vale quando a pessoa escolhe (data-theme="dark" no
  html) ou quando o sistema pede e ela não escolheu o claro. Todo texto sobre o seu fundo tem contraste AA (4,5:1) e
  o anel de foco e a borda dos campos têm 3:1 (a guarda ThemeGuardTests confere). O laranja da marca não tem contraste
  sobre branco: nos botões de destaque o texto é marinho e, no tema claro, o foco é marinho.
*/

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Camadas da tela, de baixo para cima: o mapa (que contém os z-index do Leaflet), o que fica sobre ele (cartões,
     avisos, rodapé), a barra superior, o link de pular para o conteúdo e os avisos flutuantes. Os diálogos modais
     usam a camada do navegador, acima de tudo. */
  --z-map: 0;
  /* Dentro do mapa (isolado): acima dos panes e controles do Leaflet, que vão até 1000. */
  --z-map-control: 1001;
  --z-map-overlay: 10;
  --z-top-bar: 50;
  --z-skip-link: 100;
  --z-toast: 300;

  --brand-navy: #0A2350;
  --brand-orange: #FF6B00;

  --color-background: #F4F6FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #0A2350;
  --color-text-muted: #4A5874;
  --color-border: #D5DBE6;
  --color-border-strong: #717E95;
  --color-focus: #0A2350;
  --color-link: #0A2350;

  --color-primary: #0A2350;
  --color-primary-text: #FFFFFF;
  --color-primary-hover: #13336F;
  --color-accent: #FF6B00;
  --color-accent-text: #0A2350;
  --color-accent-hover: #FF8A3D;
  --color-secondary: #E8ECF3;
  --color-secondary-text: #0A2350;
  --color-secondary-hover: #D9DFEA;

  --color-success: #1F7A3A;
  --color-success-background: #E6F4EA;
  --color-error: #B42318;
  --color-error-background: #FDECEA;
  --color-error-text: #FFFFFF;
  --color-info: #13336F;
  --color-info-background: #E8EEFA;

  --shadow-1: 0 1px 2px rgba(10, 35, 80, 0.08), 0 1px 3px rgba(10, 35, 80, 0.08);
  --shadow-2: 0 8px 24px rgba(10, 35, 80, 0.16);

  --radius-1: 0.5rem;
  --radius-2: 0.75rem;
  --radius-3: 1rem;
  --radius-pill: 999px;

  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --top-bar-height: 3.75rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #0B1324;
    --color-surface: #121B2E;
    --color-surface-raised: #1A253C;
    --color-text: #E6EAF2;
    --color-text-muted: #9AA7BD;
    --color-border: #2A3651;
    --color-border-strong: #6A7A95;
    --color-focus: #FF8A3D;
    --color-link: #B3D0FF;

    --color-primary: #FF6B00;
    --color-primary-text: #0A2350;
    --color-primary-hover: #FF8A3D;
    --color-accent: #FF6B00;
    --color-accent-text: #0A2350;
    --color-accent-hover: #FF8A3D;
    --color-secondary: #22304B;
    --color-secondary-text: #E6EAF2;
    --color-secondary-hover: #2C3D5E;

    --color-success: #5FD68A;
    --color-success-background: #12301F;
    --color-error: #FF8A80;
    --color-error-background: #3A1715;
    --color-error-text: #0B1324;
    --color-info: #B3D0FF;
    --color-info-background: #17284A;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-background: #0B1324;
  --color-surface: #121B2E;
  --color-surface-raised: #1A253C;
  --color-text: #E6EAF2;
  --color-text-muted: #9AA7BD;
  --color-border: #2A3651;
  --color-border-strong: #6A7A95;
  --color-focus: #FF8A3D;
  --color-link: #B3D0FF;

  --color-primary: #FF6B00;
  --color-primary-text: #0A2350;
  --color-primary-hover: #FF8A3D;
  --color-accent: #FF6B00;
  --color-accent-text: #0A2350;
  --color-accent-hover: #FF8A3D;
  --color-secondary: #22304B;
  --color-secondary-text: #E6EAF2;
  --color-secondary-hover: #2C3D5E;

  --color-success: #5FD68A;
  --color-success-background: #12301F;
  --color-error: #FF8A80;
  --color-error-background: #3A1715;
  --color-error-text: #0B1324;
  --color-info: #B3D0FF;
  --color-info-background: #17284A;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}