/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --md-blue-50:  #e8f0fe;
  --md-blue-100: #d2e3fc;
  --md-blue-200: #aecbfa;
  --md-blue-500: #4285f4;
  --md-blue-600: #1a73e8;
  --md-blue-700: #1967d2;
  --md-grey-50:  #f8f9fa;
  --md-grey-100: #f1f3f4;
  --md-grey-200: #e8eaed;
  --md-grey-300: #dadce0;
  --md-grey-500: #9aa0a6;
  --md-grey-600: #80868b;
  --md-grey-700: #5f6368;
  --md-grey-800: #3c4043;
  --md-grey-900: #202124;
  --md-green-500: #34a853;
  --md-green-700: #188038;
  --md-yellow-700: #f29900;
  --md-red-500: #ea4335;
  --primary:       var(--md-blue-600);
  --primary-hover: var(--md-blue-700);
  --primary-light: var(--md-blue-50);
  --surface:       #ffffff;
  --bg:            var(--md-grey-50);
  --border:        var(--md-grey-300);
  --text-primary:  var(--md-grey-900);
  --text-secondary:var(--md-grey-700);
  --text-hint:     var(--md-grey-500);
  --shadow-1: 0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 2px rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.30);
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;
  --font-ui:   'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --t-fast:   .15s cubic-bezier(.4, 0, .2, 1);
  --t-normal: .25s cubic-bezier(.4, 0, .2, 1);

  /* ═══════════════════════════════════════════════════════════
     CORES DE CATEGORIA — usadas em .alp-chip.*, .layer-category-icon.*
     e no popup do GetFeatureInfo (identify.css).
     Cada categoria tem um bg suave (tom claro) e um tom "text"
     (mais saturado, usado como texto/ícone sobre o bg suave).
  ═══════════════════════════════════════════════════════════════ */
  --cat-blue-bg:        #ECEFF1;
  --cat-blue-text:      #546E7A;

  --cat-green-bg:       #e6f4ea;
  --cat-green-text:     var(--md-green-700);

  --cat-yellow-bg:      #fef7e0;
  --cat-yellow-text:    var(--md-yellow-700);

  --cat-purple-bg:      #f3e8fd;
  --cat-purple-text:    #7b1fa2;

  --cat-orange-bg:      #fff3e0;
  --cat-orange-text:    #e65100;

  --cat-terracotta-bg:  #f7e7df;
  --cat-terracotta-text:#AA0000;

  --cat-darkblue-bg:    #e3eefb;
  --cat-darkblue-text:  #1565c0;

  --cat-pink-bg:        #fce4ec;
  --cat-pink-text:      #d6336c;

  --cat-grey-bg:        var(--md-grey-100);
  --cat-grey-text:      var(--text-secondary);

  /* ═══════════════════════════════════════════════════════════
     CORES DE MARCA — extraídas das letras do logotipo "SÃO GONÇALO"
     (saogoncalodoamarante.ce.gov.br/imagens/logo.png). Usadas na
     faixa do topo (fita.css).
  ═══════════════════════════════════════════════════════════════ */
  --sga-vermelho:   #E7413F;
  --sga-laranja:    #F28E3B;
  --sga-amarelo:    #E8B838;
  --sga-azul:       #4476C6;
  --sga-verde-agua: #74C2B2;
  --sga-verde:      #7CB832;
  --sga-rosa:       #FC4297;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
  height: 100vh;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* Janelas recebem foco ao abrir (ver aoAbrirDialogo em ui.js) — sem o
   contorno do navegador em volta da janela inteira; campos e botões
   dentro dela mantêm o contorno de foco normal. */
[role="dialog"]:focus { outline: none; }