/* TRAMO -- tokens de APLICACAO. Derivam de tramo.css (copia byte a byte de
   brand/tokens.css; tests/test_design_system.py recusa divergencia).

   IDENTIDADE VEM DA MARCA; DENSIDADE E ESCALA SAO DO TMS.
   Nenhuma cor literal aqui: tudo aponta para --tramo-*. O que a marca nao
   define (espaco, escala de tipo, largura do menu) e decisao de tela densa de
   operacao -- densidade escolhida por quem usa (bloco DENSIDADE no fim, ADR-0040),
   menu lateral, cantos pequenos e tecnicos (4/6/10).

   TEMA: TRES ESTADOS, NAO DOIS. tramo.css redefine os tokens so em
   [data-theme="dark"]. O padrao do TMS e seguir o sistema sem carimbar nada,
   entao o bloco @media abaixo repete, para --tramo-*, exatamente os valores do
   bloco escuro de tramo.css (guard: test_design_system.py confere a paridade),
   guardado por :not([data-theme="light"]) para a escolha "claro" vencer. */
:root{
  /* superficie e texto */
  --fundo:var(--tramo-surface); --superficie:var(--tramo-surface-card); --superficie-2:var(--tramo-surface-sunken);
  --linha:var(--tramo-border); --linha-forte:var(--tramo-border-strong);
  /* listagem: linha par levemente mais escura (zebra) e linha sob o mouse com o acento suave --
     derivados da superficie e do acento, entao seguem o tema escuro e a identidade visual */
  --zebra:color-mix(in srgb,var(--superficie-2) 55%,var(--superficie));
  --linha-hover:color-mix(in srgb,var(--tramo-accent) 9%,var(--superficie));
  --texto:var(--tramo-text); --texto-2:var(--tramo-ink-500);
  --texto-inverso:var(--tramo-text-inverse);
  --texto-inverso-2:color-mix(in srgb,var(--tramo-text-inverse) 68%,transparent);
  /* estrutura escura: menu lateral e painel do login levam o grafite da marca */
  --lateral:var(--tramo-ink); --lateral-item:var(--tramo-ink-600); --lateral-linha:var(--tramo-ink-600);
  /* acao: o ciano e o UNICO acento (acao primaria, indicador ativo, link) */
  --acao:var(--tramo-accent); --acao-hover:var(--tramo-accent-hover); --acao-texto:var(--tramo-text-inverse);
  --acao-suave:var(--tramo-accent-50); --selecionado:var(--tramo-accent-50); --link:var(--tramo-accent);
  /* sinal: so estado operacional, nunca decoracao -- e nunca texto (ponto cheio) */
  --ok:var(--tramo-success); --atencao:var(--tramo-warning); --erro:var(--tramo-danger);
  /* categoria: so no marcador da tag (ponto), nunca texto, nunca status (ADR-0035) */
  --categoria-1:var(--tramo-cat-1); --categoria-2:var(--tramo-cat-2); --categoria-3:var(--tramo-cat-3); --categoria-4:var(--tramo-cat-4); --categoria-5:var(--tramo-cat-5); --categoria-6:var(--tramo-cat-6);
  /* tipografia: Saira em tudo; Plex Mono em codigo operacional e numero tabular */
  --fonte:var(--tramo-font-sans); --fonte-mono:var(--tramo-font-mono);
  --rotulo-espaco:0.08em;
  /* forma */
  --raio-sm:var(--tramo-radius-sm); --raio-md:var(--tramo-radius-md); --raio-lg:var(--tramo-radius-lg);
  --elev-1:var(--tramo-shadow-sm); --elev-2:var(--tramo-shadow-md);
  --anel-foco:0 0 0 2px var(--superficie),0 0 0 4px var(--tramo-accent);
  /* movimento */
  --dur-media:160ms; --dur-lenta:320ms; --ease:cubic-bezier(0.2,0,0,1); --transicao:all var(--tramo-ease);
  /* espaco: escala de 4 */
  --esp-xs:4px; --esp-sm:8px; --esp-12:12px; --esp-md:16px; --esp-20:20px; --esp-lg:24px;
  --esp-32:32px; --esp-40:40px; --esp-xl:48px; --esp-64:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tramo-surface: #14181D;
    --tramo-surface-card: #1C2127;
    --tramo-surface-sunken: #242B33;
    --tramo-border: #39414A;
    --tramo-border-strong: #4F5860;
    --tramo-text: #F3F4F6;
    --tramo-ink-500: #9AA3AE;
    --tramo-accent: #3FB8C2;
    --tramo-accent-hover: #5FC8D0;
    --tramo-accent-50: #163A3E;
    --tramo-cat-1: #6D9BE0;
    --tramo-cat-2: #A585D6;
    --tramo-cat-3: #DA72A8;
    --tramo-cat-4: #A3B04A;
    --tramo-cat-5: #C08A5A;
    --tramo-cat-6: #8494C6;
  }
}

/* DENSIDADE (ADR-0040). Escala e espaco sao do TMS, nao da marca: cor, fonte e raio nao mudam.
   COMPACTO e o padrao -- tela de operacao, muita linha por tela. CONFORTAVEL e a medida de antes,
   identica, escolhida por quem usa no menu do usuario (fica no navegador, como o tema).
   No celular o controle volta a 40px: alvo de toque, nao densidade. */
:root{
  --tamanho:14px; --t1:24px; --t2:19px; --t3:15px;
  --max-largura:1480px; --largura-menu:240px; --altura-topo:52px;
  --rotulo-tamanho:12px; --ajuda-tamanho:11.5px; --tabela-tamanho:13px; --botao-tamanho:13px;
  --controle-altura:32px; --controle-pad:4px 10px; --botao-pad:6px 14px;
  --celula-pad:7px 10px; --cabeca-pad:6px 10px;
  --card-pad:16px; --bloco-esp:12px; --grupo-esp:16px; --main-pad:16px 20px;
  --menu-item:32px; --menu-fonte:13.5px; --submenu-item:30px; --submenu-fonte:12.5px; --avatar:32px; --vazio-pad:24px;
  --estado-tamanho:12px; --estado-pad:0 8px;
}
:root[data-densidade="confortavel"]{
  --tamanho:15px; --t1:28px; --t2:22px; --t3:17px;
  --max-largura:1240px; --largura-menu:248px; --altura-topo:60px;
  --rotulo-tamanho:13px; --ajuda-tamanho:12px; --tabela-tamanho:14px; --botao-tamanho:14px;
  --controle-altura:40px; --controle-pad:8px 14px; --botao-pad:10px 18px;
  --celula-pad:11px 10px; --cabeca-pad:8px 10px;
  --card-pad:24px; --bloco-esp:16px; --grupo-esp:24px; --main-pad:24px;
  --menu-item:38px; --menu-fonte:14.5px; --submenu-item:34px; --submenu-fonte:13px; --avatar:38px; --vazio-pad:48px;
  --estado-tamanho:13px; --estado-pad:2px 10px;
}
@media (max-width:900px){
  :root:not([data-densidade="confortavel"]){--controle-altura:40px; --botao-pad:9px 16px; --main-pad:16px}
}