/*
  Themes / tokens.css
  Fonte única da verdade visual — os mesmos nomes e valores documentados
  no Design System "Instrumento". Nenhum outro módulo declara cor,
  espaçamento, raio, sombra ou duração fora daqui.
*/

/* Prompt 14, seção 24: "Poppins ou Inter" — Poppins escolhida (licença
   SIL-OFL, corpo geométrico institucional, já usada em outros produtos
   digitais de prefeituras brasileiras). Auto-hospedada como as demais
   fontes do projeto (nunca um <link> de CDN — mesma política de zero
   dependência de terceiros do resto da aplicação). Substitui a Archivo em
   `--font-ui`; a Archivo em si permanece instalada no projeto (não é
   removida, só deixa de ser referenciada) até confirmação do usuário. */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./fonts/poppins-400.ttf') format('truetype');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('./fonts/poppins-500.ttf') format('truetype');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./fonts/poppins-600.ttf') format('truetype');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./fonts/poppins-700.ttf') format('truetype');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('./fonts/archivo-var.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./fonts/plexmono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('./fonts/plexmono-500.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('./fonts/plexmono-600.woff2') format('woff2');
}

:root{
  /* neutrals — "Ardósia" */
  --n-0:#FFFFFF; --n-25:#FBFBFD; --n-50:#F5F6F9; --n-100:#EBECF2; --n-200:#DBDEE7;
  --n-300:#C2C6D4; --n-400:#9BA0B4; --n-500:#767C93; --n-600:#585E74; --n-700:#40445A;
  --n-800:#2A2D3D; --n-900:#1A1C27; --n-950:#10121A;

  /* primária — "Cobalto" */
  --c-50:#EEF1FE; --c-100:#DCE2FD; --c-200:#B4C0FA; --c-300:#8B9BF5; --c-400:#5C71EC;
  --c-500:#3355D8; --c-600:#2743B8; --c-700:#1E3491; --c-800:#182A73; --c-900:#14235E;

  /* ---- marca institucional ----
     Escopo deliberadamente limitado ao CHROME institucional (header,
     sidebar, seus botões) — nunca substitui `--accent`, que continua
     governando todo estado interativo do resto da aplicação (seleção,
     foco, links, gráficos) exatamente como antes; misturar os dois papéis
     re-tingiria dezenas de componentes fora do escopo deste prompt.
     Redesign do header/sidebar (pedido do usuário): a sidebar continua
     azul institucional fixo em qualquer tema (nunca muda com o toggle,
     seção 13); os valores abaixo foram recalibrados pra uma família de
     azul mais "pura" (menos índigo) pedida explicitamente com hex de
     referência — `--brand-primary-light` em especial fica bem mais vivo
     (item ativo do menu precisa se destacar claramente do resto da
     sidebar escura). */
  --brand-primary:#0F3D7A;
  --brand-primary-dark:#082D61;
  --brand-primary-light:#165DFF;
  --brand-on-primary:#FFFFFF;
  --brand-on-primary-muted:rgba(255,255,255,.72);
  --brand-accent-green:#1E9F4E; /* verde da logo — cor institucional oficial, reservado (rodapé, header) — nunca cor de estado interativo */
  --brand-accent-green-hover:#188A43;

  /* ---- tokens do HEADER especificamente (não a sidebar) ----
     Único token desta marca que MUDA com o tema: o header vira `--surface`
     (branco no claro, superfície escura no escuro — seção 31), então o
     texto sobre ele precisa inverter junto, senão o título em azul escuro
     fica ilegível sobre um fundo já escuro. Definido aqui, com o mesmo
     padrão de 3 blocos (raiz + 2 blocos de tema escuro) já usado para
     `--canvas`/`--surface`/etc. logo abaixo. */
  --header-ink:var(--brand-primary-dark);

  /* semânticas */
  --success:#188A5F; --success-bg:#E7F6EF; --success-border:#B9E4CE;
  --warning:#A66508; --warning-bg:#FBF1DC; --warning-border:#EFD49C;
  --danger:#C13B35;  --danger-bg:#FBEAE9;  --danger-border:#F1BFBB;
  --info:#0F7E90;    --info-bg:#E3F3F5;    --info-border:#ABDCE2;
  --iris:#5F4BCB;    --iris-bg:#EEEBFB;    --iris-border:#CFC5F1;

  /* tokens de papel — o que os componentes de fato consomem */
  --canvas:#F6F7FA;
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-sunken:#F0F1F5;
  --border:var(--n-200);
  --border-strong:var(--n-300);
  --border-subtle:var(--border); /* alias — Prompt 14 §63 usa este nome; mesmo valor de --border, nunca redefinir os dois em separado */
  --text-primary:var(--n-900);
  --text-secondary:var(--n-600);
  --text-tertiary:var(--n-500);
  --text-disabled:var(--n-400);
  --text-on-accent:#FFFFFF;
  /* Prompt 12, seção 29: acento institucional mais próximo do azul-marinho
     da logo da Prefeitura — reaproveita a mesma escala "Cobalto" já
     existente, só desloca qual degrau vira `--accent` (nenhuma cor nova). */
  --accent:var(--c-700);
  --accent-hover:var(--c-800);
  --accent-active:var(--c-900);
  --accent-subtle:var(--c-50);
  --focus-ring:rgba(30,52,145,.38);
  --overlay:rgba(16,18,26,.5);
  --tooltip-bg:var(--n-900);
  --tooltip-text:#FFFFFF;

  --shadow-xs:0 1px 2px rgba(20,22,34,.06);
  --shadow-sm:0 1px 3px rgba(20,22,34,.08), 0 1px 2px rgba(20,22,34,.05);
  --shadow-md:0 4px 10px rgba(20,22,34,.08), 0 2px 4px rgba(20,22,34,.05);
  --shadow-lg:0 12px 24px rgba(20,22,34,.10), 0 4px 8px rgba(20,22,34,.05);
  --shadow-xl:0 24px 48px rgba(20,22,34,.16), 0 8px 16px rgba(20,22,34,.06);

  --space-0:0; --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px;
  --space-5:16px; --space-6:20px; --space-7:24px; --space-8:32px;
  --space-9:40px; --space-10:48px; --space-11:64px; --space-12:80px; --space-13:96px;

  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:999px;

  --dur-instant:100ms; --dur-fast:150ms; --dur-base:200ms; --dur-slow:300ms; --dur-slower:420ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --font-ui:'Poppins',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* dimensões de shell — únicas medidas de layout fora da grade de espaçamento,
     porque descrevem a casca da aplicação, não conteúdo. Header aumentado
     na Prompt 14 §5 ("um dos elementos visuais mais marcantes da
     aplicação") — herda em `--shell-topbar-h-compact` para o mobile
     (§60/§43), que precisa de um header bem mais baixo. */
  --shell-topbar-h:88px;
  --shell-topbar-h-compact:56px;
  --shell-sidebar-w:248px;
  --shell-sidebar-w-collapsed:72px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0D0E14; --surface:#13141C; --surface-raised:#191B25; --surface-sunken:#0A0B10;
    --border:#262838; --border-strong:#363A4E;
    --text-primary:#EEEFF5; --text-secondary:#A6AAC0; --text-tertiary:#767C93; --text-disabled:#4B4F63;
    --text-on-accent:#FFFFFF;
    --accent:#6C82F0; --accent-hover:#8393F3; --accent-active:#5A6EDD; --accent-subtle:#1B2040;
    --focus-ring:rgba(108,130,240,.45); --overlay:rgba(4,5,10,.65);
    --tooltip-bg:var(--n-100); --tooltip-text:var(--n-900);

    --success:#3FCC93; --success-bg:rgba(63,204,147,.12); --success-border:rgba(63,204,147,.32);
    --warning:#E3A83B; --warning-bg:rgba(227,168,59,.12); --warning-border:rgba(227,168,59,.32);
    --danger:#EB6B64;  --danger-bg:rgba(235,107,100,.12); --danger-border:rgba(235,107,100,.32);
    --info:#3FBBCF;    --info-bg:rgba(63,187,207,.12);    --info-border:rgba(63,187,207,.32);
    --iris:#9C8AF0;    --iris-bg:rgba(156,138,240,.14);   --iris-border:rgba(156,138,240,.34);

    /* Header vira `--surface` escuro no tema escuro (§31) — título em azul
       marinho escuro ficaria ilegível sobre um fundo já escuro, então vira
       quase-branco; o tracejado da cidade troca pra um azul escuro
       discreto (senão o azul claríssimo original destoaria muito do fundo
       escuro, virando chamativo em vez de textura sutil). */
    --header-ink:var(--text-primary);

    --shadow-xs:0 0 0 1px rgba(0,0,0,.3);
    --shadow-sm:0 2px 6px rgba(0,0,0,.35);
    --shadow-md:0 6px 16px rgba(0,0,0,.4);
    --shadow-lg:0 16px 32px rgba(0,0,0,.45);
    --shadow-xl:0 28px 56px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --canvas:#0D0E14; --surface:#13141C; --surface-raised:#191B25; --surface-sunken:#0A0B10;
  --border:#262838; --border-strong:#363A4E;
  --text-primary:#EEEFF5; --text-secondary:#A6AAC0; --text-tertiary:#767C93; --text-disabled:#4B4F63;
  --text-on-accent:#FFFFFF;
  --accent:#6C82F0; --accent-hover:#8393F3; --accent-active:#5A6EDD; --accent-subtle:#1B2040;
  --focus-ring:rgba(108,130,240,.45); --overlay:rgba(4,5,10,.65);
  --tooltip-bg:var(--n-100); --tooltip-text:var(--n-900);

  --success:#3FCC93; --success-bg:rgba(63,204,147,.12); --success-border:rgba(63,204,147,.32);
  --warning:#E3A83B; --warning-bg:rgba(227,168,59,.12); --warning-border:rgba(227,168,59,.32);
  --danger:#EB6B64;  --danger-bg:rgba(235,107,100,.12); --danger-border:rgba(235,107,100,.32);
  --info:#3FBBCF;    --info-bg:rgba(63,187,207,.12);    --info-border:rgba(63,187,207,.32);
  --iris:#9C8AF0;    --iris-bg:rgba(156,138,240,.14);   --iris-border:rgba(156,138,240,.34);

  --header-ink:var(--text-primary);

  --shadow-xs:0 0 0 1px rgba(0,0,0,.3);
  --shadow-sm:0 2px 6px rgba(0,0,0,.35);
  --shadow-md:0 6px 16px rgba(0,0,0,.4);
  --shadow-lg:0 16px 32px rgba(0,0,0,.45);
  --shadow-xl:0 28px 56px rgba(0,0,0,.55);
}