/* =============================================================
   Tokens do Backoffice — tema CLARO, os MESMOS valores do painel (`wms-web`).

   Linguagem visual inspirada em painéis administrativos modernos (Eyris):
   moldura clara em duas camadas — trilho de navegação em cinza muito suave e
   uma "folha" branca arredondada onde a tela vive —, cartões brancos com raio
   generoso e borda fina, cabeçalhos de tabela discretos, chips em pílula e
   uma cor de marca azul única para tudo que é ação.

   Só os VALORES moram aqui; nenhum componente escreve cor, raio, sombra ou
   espaçamento literal. Trocar um token muda o painel inteiro de uma vez.

   Contraste: todo tom usado como TEXTO dá pelo menos 4,5:1 sobre a superfície
   em que aparece (RNF-022). O que reprova vira ornamento (ponto, ícone, borda)
   e nunca texto.

   Cópia deliberada, não import: repositórios independentes não compartilham
   arquivo (PROMPT.md). Ao mudar um token no painel, mudar aqui também.

   Fontes vêm do sistema: esta console não tem build nem CDN. Se Inter e
   JetBrains Mono não estiverem instaladas, a cascata cai em system-ui e
   ui-monospace.
   ============================================================= */

:root {
  /* ---------- Superfícies ---------- */
  --fundo-aplicacao: #f4f5f7;
  --superficie: #ffffff;
  --superficie-sutil: #fafafa;
  --superficie-neutra: #f3f4f6;
  --superficie-elevada: #ffffff;

  /* ---------- Bordas e divisores ---------- */
  --borda: #e5e7eb;
  --borda-controle: #d5d8de;
  --borda-forte: #cfd3da;
  /* Divisor entre linhas da tabela: mais claro que a borda do cartão para
     que a grade não compita com o conteúdo em varredura vertical. */
  --divisor-linha: #f0f1f3;

  /* ---------- Texto ---------- */
  --texto: #171717;
  --texto-medio: #374151;
  /* #6b7280 dá 4,83:1 sobre branco e 4,6:1 sobre --superficie-sutil. */
  --texto-secundario: #6b7280;
  --texto-suave: #6b7280;
  /* Ornamento — ponto de chip, divisor, ícone decorativo. NUNCA texto. */
  --ornamento: #a1a6ae;

  /* ---------- Trilho de navegação (claro, na mesma família do fundo) ---------- */
  --lateral-fundo: #f4f5f7;
  --lateral-borda: #e5e7eb;
  --lateral-hover: #eaecef;
  --lateral-texto: #4b5563;
  --lateral-texto-forte: #171717;
  --lateral-texto-fraco: #6b7280;
  --lateral-grupo: #8a909a;
  --lateral-ativo-fundo: #ffffff;
  --lateral-ativo-texto: #1d4ed8;
  --lateral-ativo-sombra:
    inset 0 0 0 1px #e5e7eb, 0 1px 3px rgb(16 24 40 / 8%), 0 1px 2px -1px rgb(16 24 40 / 8%);
  --lateral-avatar: #dbe5fb;
  --lateral-avatar-texto: #1d4ed8;
  --lateral-contador: #e9ebef;
  --lateral-contador-texto: #4b5563;

  /* ---------- Marca / ação primária ---------- */
  --marca: #2563eb;
  --marca-escura: #1d4ed8;
  --marca-suave: #eef3fe;
  --marca-borda: #c7d7fb;
  --marca-texto: #1d4ed8;
  --marca-sombra: 0 1px 2px rgb(37 99 235 / 24%);

  /* ---------- Sucesso ---------- */
  --sucesso: #15803d;
  --sucesso-escuro: #166534;
  --sucesso-suave: #ecfdf3;
  --sucesso-suave-hover: #dcfce7;
  --sucesso-borda: #bbe5c8;
  --sucesso-texto: #166534;

  /* ---------- Atenção ---------- */
  --atencao: #b45309;
  --atencao-suave: #fff7ed;
  --atencao-suave-hover: #ffedd5;
  --atencao-borda: #fcd9b0;
  --atencao-texto: #9a3412;

  /* ---------- Erro ---------- */
  --erro: #dc2626;
  --erro-suave: #fef2f2;
  --erro-borda: #fecaca;
  --erro-borda-botao: #f5b5b5;
  --erro-texto: #b91c1c;

  /* ---------- Neutro (estado desativado) ---------- */
  --neutro-suave: #f3f4f6;
  --neutro-borda: #dfe2e7;
  --neutro-texto: #4b5563;
  --neutro-ponto: #9ca3af;

  /* ---------- Tipografia ----------
     Inter no texto; JetBrains Mono em tudo que se lê caractere a caractere —
     código de depósito, SKU, pedido e identificador de dispositivo (RNF-026).
     As duas são auto-hospedadas via @fontsource: nenhuma requisição a CDN. */
  --fonte-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --texto-11: 11px;
  --texto-12: 12px;
  --texto-13: 13px;
  --texto-14: 14px;
  --texto-15: 15px;
  --texto-16: 16px;
  --texto-18: 18px;
  --texto-20: 20px;
  --texto-22: 22px;
  --texto-24: 24px;
  --texto-28: 28px;
  --texto-32: 32px;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  /* ---------- Espaçamento ---------- */
  --espaco-1: 4px;
  --espaco-2: 6px;
  --espaco-3: 8px;
  --espaco-4: 10px;
  --espaco-5: 12px;
  --espaco-6: 14px;
  --espaco-7: 16px;
  --espaco-8: 18px;
  --espaco-9: 20px;
  --espaco-10: 22px;
  --espaco-11: 24px;
  --espaco-12: 28px;
  --espaco-13: 32px;

  /* ---------- Medidas da moldura ---------- */
  --largura-nav: 248px;
  --largura-nav-compacta: 72px;
  --altura-item-nav: 38px;
  --altura-barra-superior: 56px;
  --altura-cabecalho: 72px;
  --padding-nav-lateral: 14px;
  --padding-conteudo: 20px 24px 24px;
  --padding-horizontal-tela: 24px;
  --respiro-moldura: 10px;

  /* ---------- Controles ---------- */
  --altura-controle: 38px;
  --altura-controle-media: 34px;
  --altura-controle-pequena: 30px;
  --altura-paginacao: 30px;
  --altura-linha-tabela: 44px;
  --altura-cabecalho-tabela: 40px;
  --altura-chip: 26px;
  --altura-chip-tabela: 24px;

  /* ---------- Raios ---------- */
  --raio-controle: 8px;
  --raio-chip: 999px;
  --raio-cartao: 12px;
  --raio-cartao-grande: 16px;
  --raio-folha: 16px;
  --raio-caixa: 6px;
  --raio-icone: 10px;
  --raio-pilula: 999px;

  /* ---------- Sombras ---------- */
  --sombra-cartao: 0 1px 2px rgb(16 24 40 / 4%);
  --sombra-controle: 0 1px 2px rgb(16 24 40 / 5%);
  --sombra-painel: -16px 0 48px rgb(16 24 40 / 14%);
  --sombra-cartao-flutuante: 0 24px 48px -12px rgb(16 24 40 / 18%), 0 2px 6px rgb(16 24 40 / 6%);
  --veu: rgb(16 24 40 / 32%);

  /* ---------- Painel visual da tela de entrada ----------
     A única superfície saturada do painel: a cor da marca, com dois brilhos
     radiais e cartões translúcidos por cima. Texto branco sobre #1d4ed8 dá
     6,3:1; o tom suave (85% de branco) continua acima de 4,5:1. */
  --painel-entrar-fundo: linear-gradient(160deg, #2563eb 0%, #1d4ed8 55%, #172f9c 100%);
  --painel-entrar-brilho:
    radial-gradient(55% 45% at 85% 10%, rgb(255 255 255 / 18%), transparent 70%),
    radial-gradient(45% 40% at 10% 95%, rgb(129 140 248 / 35%), transparent 70%);
  --painel-entrar-texto: #ffffff;
  --painel-entrar-texto-suave: rgb(255 255 255 / 84%);
  --painel-entrar-borda: rgb(255 255 255 / 22%);
  --painel-entrar-vidro: rgb(255 255 255 / 10%);

  /* ---------- Foco ---------- */
  --anel-foco: 0 0 0 3px rgb(37 99 235 / 22%);

  /* ---------- Movimento ---------- */
  --transicao-rapida: 120ms ease;
  --transicao-media: 180ms ease;
}