/* =============================================================================
   Imo Radar — design tokens
   Único ficheiro com literais. Nenhum hex fora daqui.

   Vem do registo de design (criado no Claude Design como «Invoca
   Dashboard», que era o nome antigo da app). Duas mudanças face ao ficheiro
   de design, e só duas, ambas por contraste medido:

     --text4   #98a2b3 → #6d7789 (claro)   2,6:1 → 4,5:1
               #6b7684 → #7c8794 (escuro)  3,8:1 → 4,8:1
     --faint   #b6bdc9 → #7a8494 (claro)   1,9:1 → 3,8:1
               #565f6b → #69737f (escuro)  2,7:1 → 3,6:1

   Estes dois níveis carregam texto a sério — a freguesia por baixo da morada,
   o `n` ao lado da mediana, o índice da linha. No ficheiro de design ficavam
   abaixo do mínimo e desapareciam num tablet ao sol, que é exactamente onde
   esta app se usa. Todo o resto da paleta está intacto.

   Contraste sobre a superfície de painel, escuro (#151a20):
     texto       #e6e9ef  14,4:1
     forte       #d3d9e1  11,9:1
     secundário  #a9b2bf   8,2:1
     terciário   #8b95a3   5,8:1
     quaternário #7c8794   4,8:1
     ténue       #69737f   3,6:1
     dourado     #e7b465   9,3:1
     acento      #6ba7d6   6,8:1
   Claro (#ffffff): texto 17,7:1 · secundário 7,7:1 · terciário 5,0:1 ·
   dourado (--gold-text #7a4d09) 7,3:1 · acento #17405e 10,9:1.

   Mínimo exigido: 4,5:1 para texto, 3:1 para o resto. Nenhum fica abaixo.

   O dourado carrega SÓ o sinal: acção primária, selecção, precisão de morada.
   O acento (azul) carrega a estatística: mediana, banda p25–p75. Verde e âmbar
   ficam reservados a direcção e a risco.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   ESCURO — o de omissão, como o registo de design manda.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ---- superfícies ---- */
  --bg:        #0c1014;
  --surface:   #151a20;   /* cartão, painel, linha de tabela */
  --surface2:  #11161b;   /* cabeçalho e rodapé de tabela */
  --surface3:  #1a2027;   /* linha sob o rato */

  /* ---- linhas ---- */
  --line:      #262d36;   /* divisória de secção */
  --line2:     #1d232a;   /* divisória de linha, mais ténue */
  --line3:     #333c47;   /* contorno de controlo, mais firme */

  /* ---- texto ---- */
  --text:      #e6e9ef;
  --strong:    #d3d9e1;
  --text2:     #a9b2bf;
  --text3:     #8b95a3;
  --text4:     #7c8794;
  --faint:     #69737f;

  /* ---- acento: a estatística ---- */
  --accent:      #6ba7d6;
  --accent-soft: #152532;
  --accent-line: #28485c;
  --band-line:   #3a5a70;
  --ring:  rgba(107, 167, 214, 0.16);
  --sh:    0 1px 2px rgba(0, 0, 0, 0.4);

  /* ---- barra lateral ---- */
  --rail:        #0a1218;
  --rail-text:   #c2ccd6;
  --rail-mid:    #93a0ad;
  --rail-dim:    #74808d;
  --rail-faint:  #6b7783;
  --rail-bright: #e6e9ef;
  --rail-on:     rgba(231, 180, 101, 0.14);   /* item de navegação activo */
  --rail-hover:  rgba(255, 255, 255, 0.06);
  --rail-card:   rgba(255, 255, 255, 0.05);

  /* ---- dourado: o sinal e a acção ---- */
  --gold:       #e7b465;
  --gold-soft:  #241c0d;
  --gold-line:  #4d3c19;
  --gold-text:  #e7b465;
  --btn:        #e7b465;
  --btn-ink:    #2a1803;
  --btn-hover:  #f0c37c;

  /* ---- direcção e risco ---- */
  --ok:          #5fbf8f;
  --amber:       #d9a441;
  --green:       #2f9e6b;
  --green-soft:  #0f2118;
  --green-line:  #265f43;
  --green-text:  #5fbf8f;
  --neg:         #f07a6b;

  /* ---- tinta sobre fundos que não mudam com o tema ---- */
  --on-dark:   #ffffff;
  --on-accent: #0c1014;

  /* ---- mapa ---- */
  --map-bg:         #0f151a;
  --map-land:       #171e25;
  --map-land2:      #1b2731;
  --map-land2-line: #2b3d4b;
  --map-road:       #242d37;

  /* Séries por zona. Ordem fixa, nunca ciclada. */
  --s-1: #6ba7d6;
  --s-2: #5cb8e6;
  --s-3: #5fbf8f;
  --s-4: #d9a441;
  --s-5: #a9b2bf;
  --s-6: #a68af0;

  /* -------------------------------------------------------------------------
     Nomes antigos, mantidos como apelidos. Os módulos de gráfico lêem-nos no
     momento do render; renomeá-los obrigava a mexer em SVG por causa de CSS.
     ------------------------------------------------------------------------- */
  --panel:     var(--surface);
  --panel-2:   var(--surface3);
  --cold:      var(--surface2);
  --line-2:    var(--line2);
  --line-3:    var(--line2);
  --text-2:    var(--text2);
  --muted:     var(--text3);
  --gold-bg:   var(--gold-soft);
  --pos:       var(--green-text);

  /* ---- tipografia: uma família, quatro pesos ---- */
  --sans: Nunito, ui-sans-serif, system-ui, sans-serif;
  --mono: Nunito, ui-sans-serif, system-ui, sans-serif;

  --t-title:   17px;   /* título de vista */
  --t-lead:    22px;   /* intervalo implicado */
  --t-body:    14px;
  --t-small:   13px;

  --m-hero:    25px;   /* número dos cartões de sinal */
  --m-big:     17px;
  --m-body:    13px;
  --m-small:   12px;
  --m-micro:   11px;
  --m-label:  10.5px;  /* rótulos de secção */

  --track-label: 0.08em;

  /* ---- grelha de 4px ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;  --s12: 48px;

  /* ---- raios ---- */
  --r5: 5px;  --r6: 6px;  --r7: 7px;  --r8: 8px;
  --r9: 9px;  --r10: 10px;  --r12: 12px;  --r-pill: 16px;

  /* ---- movimento: discreto ---- */
  --dur: 120ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---- alvos de toque (telefone) ---- */
  --touch: 44px;

  /* Zero gradientes, zero sombras decorativas, zero emoji. */
  --tt-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);

  --focus: 0 0 0 1px var(--bg), 0 0 0 3px var(--btn);
}

/* ---------------------------------------------------------------------------
   CLARO. Para o tablet ao sol. Não é o de omissão.
   --------------------------------------------------------------------------- */
:root[data-tema="claro"] {
  color-scheme: light;

  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface2:  #fcfcfd;
  --surface3:  #f9fafb;

  --line:      #e4e7ec;
  --line2:     #f2f4f7;
  --line3:     #d0d5dd;

  --text:      #101828;
  --strong:    #344054;
  --text2:     #475467;
  --text3:     #667085;
  --text4:     #6d7789;
  --faint:     #7a8494;

  --accent:      #17405e;
  --accent-soft: #eef3f8;
  --accent-line: #d7e3ed;
  --band-line:   #b8ccdc;
  --ring:  rgba(23, 64, 94, 0.08);
  --sh:    0 1px 2px rgba(16, 24, 40, 0.05);

  /* A barra lateral não acompanha o tema: é a âncora escura do ecrã, e é ela
     que faz o painel branco parecer papel em cima de uma mesa. */
  --rail:        #0f2b40;
  --rail-text:   #c7d4de;
  --rail-mid:    #9fb3c1;
  --rail-dim:    #93a9b8;
  --rail-faint:  #8ba1b1;
  --rail-bright: #e7ecf1;

  --gold:       #e7b465;
  --gold-soft:  #fdf6e9;
  --gold-line:  #ecd3a4;
  --gold-text:  #7a4d09;
  --btn:        #e7b465;
  --btn-ink:    #3a2205;
  --btn-hover:  #d9a441;

  --ok:          #5fbf8f;
  --amber:       #b54708;
  --green:       #0d9a5f;
  --green-soft:  #eafaf1;
  --green-line:  #a9e0c4;
  --green-text:  #066c43;
  --neg:         #b42318;

  --on-dark:   #ffffff;
  --on-accent: #ffffff;

  --map-bg:         #fbfcfd;
  --map-land:       #f2f4f7;
  --map-land2:      #e8eef4;
  --map-land2-line: #cfdbe5;
  --map-road:       #ffffff;

  --s-1: #17405e;
  --s-2: #1570a6;
  --s-3: #067647;
  --s-4: #b54708;
  --s-5: #667085;
  --s-6: #6941c6;

  --tt-shadow: 0 10px 30px rgba(16, 24, 40, 0.16);
}