/* ===================================================================
   ONIX Estoque — TOKENS de design (única fonte de verdade)
   Identidade: preto e amarelo. Base herdada do NIXX, recolorizada.

   REGRA (CLAUDE.md): nenhum arquivo pode escrever cor, espaçamento,
   fonte ou raio "na mão". Sempre var(--token) apontando pra cá.
   =================================================================== */

:root {
  /* ---------- Cores: superfícies (preto ONIX) ---------- */
  --cor-fundo:        #0a0a0a;
  --cor-fundo-elev:   #141414;
  --cor-card:         #161616;
  --cor-card-hover:   #1d1d1d;
  --cor-borda:        #262626;
  --cor-borda-suave:  #1f1f1f;

  /* ---------- Cores: texto ---------- */
  --cor-texto:        #f4f4f5;
  --cor-texto-2:      #a1a1aa;
  --cor-texto-3:      #6b6b73;

  /* ---------- Cores: marca (amarelo ONIX) ---------- */
  --cor-marca:           #ffd400;
  --cor-marca-suave:     rgba(255, 212, 0, .14);
  --cor-marca-borda:     rgba(255, 212, 0, .40);
  --cor-marca-contraste: #111111;  /* texto/ícone sobre o amarelo */

  /* ---------- Cores: estados ---------- */
  --cor-verde:        #22c55e;
  --cor-verde-suave:  rgba(34, 197, 94, .14);
  --cor-vermelho:     #ef4444;
  --cor-vermelho-suave: rgba(239, 68, 68, .14);
  --cor-vermelho-borda: rgba(239, 68, 68, .40);
  --cor-azul:         #3b82f6;
  --cor-amarelo-alerta: #eab308;
  --cor-amarelo-alerta-suave: rgba(234, 179, 8, .14);

  /* ---------- Tipografia ---------- */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  27px;

  --peso-medio: 500;
  --peso-semi:  600;
  --peso-bold:  700;
  --peso-black: 800;

  /* ---------- Espaçamento (escala de 4px) ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;

  /* ---------- Raio ---------- */
  --raio-sm:   11px;
  --raio:      16px;
  --raio-lg:   20px;
  --raio-full: 999px;

  /* ---------- Sombras ---------- */
  --sombra:      0 8px 30px rgba(0, 0, 0, .35);
  --sombra-menu: 0 18px 44px rgba(0, 0, 0, .50);
  --sombra-glow: 0 8px 20px rgba(255, 212, 0, .30);

  /* ---------- Layout ---------- */
  --largura-sidebar: 248px;

  /* ---------- Transições ---------- */
  --transicao: .15s ease;
}