/* ============================================================
   NORTH — Design tokens
   Fonte única de verdade para cor, espaço, tipografia e sombra.
   Nenhum arquivo deve usar cor literal fora daqui.
============================================================ */

:root {
  /* ══════════════════════════════════════════════════════════
     PALETA OFICIAL — Modo Escuro

     Cinco cores definidas pela marca: três degraus de fundo entre o
     preto e o cinza, o bronze da identidade e o quase-branco do texto.
     As demais são degraus DERIVADOS entre elas — cinco tons não
     constroem uma interface inteira (falta o passo entre um cartão e o
     campo dentro dele, falta o hover, e faltam as cores de estado, que
     a paleta não define). Cada derivada está marcada.

     O fundo é NEUTRO, sem temperatura: #0B0B0B tem luminância de
     0,003. Com um fundo tão escuro, o bronze passa a render mais do
     que rendia sobre marrom — 5,3:1 contra 4,3:1 —, e por isso ele
     pode carregar texto, e não só ícone e borda.

     A leitura depende de uma ESCADA de superfícies, não de dois
     degraus: fundo → faixa → cartão → campo → hover.
     ══════════════════════════════════════════════════════════ */

  /* ── Superfícies ── */
  --bg:           #0B0B0B;  /* MARCA · fundo de tudo */
  --bg-elev:      #141414;  /* derivada · faixas e caixas embutidas */
  --surface:      #1A1A1A;  /* MARCA · cards, painéis, menus, modais */
  --surface-2:    #2A2A2A;  /* MARCA · campos e chips SOBRE um card */
  --surface-3:    #383838;  /* derivada · hover, separação maior */

  /* ── Bordas ──
     Cinzas neutros, sempre um degrau acima da superfície que
     delimitam: a borda separa, não decora. */
  --border:       #303030;  /* derivada · linha discreta padrão */
  --border-soft:  #242424;  /* derivada · divisória interna */
  --border-strong:#454545;  /* derivada · borda de destaque, foco, hover */

  /* ── Texto ──
     A marca define o topo da escala. Os dois níveis abaixo são
     derivados: o do meio carrega frases que alguém precisa ler
     (7,4:1); o de baixo é metadado, e assume ser discreto (3,9:1). */
  --text:         #EBEBEB;  /* MARCA    · títulos, texto e ícones — 16,5:1 */
  --text-2:       #9E9E9E;  /* derivada · descrições que se leem  —  7,4:1 */
  --text-3:       #6E6E6E;  /* derivada · metadado, baixa prioridade — 3,9:1 */

  /* ── Identidade ──
     O bronze é a única cor de marca, e sobre o preto ele carrega o que
     importa: o nome NORTH, o emblema, a aba ativa, o botão da conta, o
     botão de ação principal. `--primary-btn` é o mesmo bronze — com o
     texto no preto da paleta ele entrega 5,3:1, então não precisa do
     degrau mais claro que o fundo marrom exigia. */
  --primary:      #A67C52;  /* MARCA · nome, emblema, aba ativa, ícone ativo */
  --primary-btn:  #A67C52;  /* fundo do botão principal — 5,3:1 com --bg */
  --primary-hi:   #C69A6E;  /* derivada · hover e ênfase — 7,7:1 */
  --primary-lo:   #8A6540;  /* derivada · pressionado, borda funda */
  --primary-soft: rgba(166,124,82,.16);
  --primary-line: rgba(166,124,82,.38);
  --accent:       #C69A6E;  /* derivada · bronze claro, destaque secundário */
  --accent-soft:  rgba(198,154,110,.14);
  --accent-line:  rgba(198,154,110,.30);

  /* ── Estados ──
     A paleta não define estado. Estes são derivados para conviver com
     ela: uma matiz clara o bastante para virar ponto de atenção sobre
     o preto. Sobre o fundo neutro todos ficam entre 6,5 e 11,2:1.

     `--info` é o azul do sistema: informação em curso, tempo, estado
     que não é erro nem sucesso — papel que não cabe no bronze, porque
     bronze aqui significa marca. */
  --ok:           #5CCB93;  /* verde menta —  9,8:1 */
  --ok-soft:      rgba(92,203,147,.14);
  --ok-line:      rgba(92,203,147,.30);
  --warn:         #E9BE55;  /* âmbar       — 11,2:1 */
  --warn-soft:    rgba(233,190,85,.14);
  --warn-line:    rgba(233,190,85,.30);
  --danger:       #E4736A;  /* coral       —  6,5:1 */
  --danger-soft:  rgba(228,115,106,.15);
  --danger-line:  rgba(228,115,106,.32);
  --info:         #5B9BE8;  /* azul        —  6,8:1 */
  --info-soft:    rgba(91,155,232,.15);
  --info-line:    rgba(91,155,232,.32);
  --neutral-soft: rgba(235,235,235,.09);

  /* ── Rotas (informação funcional, não decoração) ──
     As quatro matizes são o vocabulário que a equipe lê no mapa: azul,
     verde, vermelho, roxo. Sobre o fundo neutro elas ficam entre 6,2 e
     8,8:1 — separam quatro áreas sobrepostas num mapa escuro à
     distância de um braço, que é a função delas.
     Cada rota também tem uma FORMA, então a cor nunca trabalha só. */
  --rota-1:       #5B9BE8;  /* azul     · Planalto 1 — círculo   */
  --rota-2:       #46C46F;  /* verde    · Planalto 2 — losango   */
  --rota-3:       #EA6A4C;  /* vermelho · Hilda      — triângulo */
  --rota-4:       #B07BE0;  /* roxo     · Jussara    — quadrado  */

  /* ── Papéis ──
     Mesma faixa de luminosidade das rotas, para que um selo de cargo e
     um chip de rota pareçam do mesmo sistema. */
  --role-owner:   #B79AEB;
  --role-admin:   #E093B4;
  --role-user:    #7FB2E8;
  --role-req:     #E3C069;
  --role-ent:     #6FCB9F;

  /* ── Véus e mapa ── */
  --overlay:      rgba(0,0,0,.72);
  --overlay-soft: rgba(0,0,0,.56);
  --map-bg:       #0F0F0F;  /* base do mapa, no mesmo preto da interface */
  --map-fora:     #000000;  /* área fora das cidades habilitadas */

  /* ── Tipografia ── */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   19px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;

  /* ── Espaço ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Raio ── */
  --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

  /* ── Sombra ──
     Preto neutro, como o resto da base. Sobre um fundo quase preto a
     sombra trabalha menos que a escada de superfícies, mas ainda
     separa o cartão da faixa atrás dele. */
  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 4px 14px rgba(0,0,0,.46);
  --sh-3: 0 14px 40px rgba(0,0,0,.60);

  /* ── Movimento (discreto) ── */
  --t-fast: .12s ease;
  --t:      .18s cubic-bezier(.4,0,.2,1);

  /* ── Layout ── */
  --sidebar-w: 216px;
  --topbar-h:  60px;
  --z-drawer: 800; --z-modal: 1000; --z-toast: 1200;
}

/* ============================================================
   TEXTO AUXILIAR SOBRE SUPERFÍCIE

   `--text-3` é calibrado contra o FUNDO (#0B0B0B), onde entrega
   3,9:1 — discreto, que é o papel dele. Sobre um CARD (#1A1A1A) cai
   para 3,4:1 e, dentro de um campo (#2A2A2A), para 2,8:1.

   Em vez de caçar cada `.card-sub` do sistema, o token é redefinido no
   escopo das superfícies claras: um degrau acima, visualmente o mesmo
   cinza, 3,9:1 sobre o card. Todo componente que já usa
   `var(--text-3)` acompanha sozinho.
============================================================ */
.card,
.modal,
.conta-menu,
.gaveta,
.painel,
.sugestoes {
  --text-3: #787878;
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}