/* =====================================================================
   NR Estoque — tokens da identidade visual
   Fonte: Identidade Visual/LEIA-ME.md e manual da marca (direção "Encaixe")
   Nenhum valor de cor, raio ou sombra deve ser escrito solto no CSS:
   sempre usar as variáveis abaixo.
   ===================================================================== */

:root {
    /* --- Cores da marca --- */
    --nr-azul: #1E4FD8;
    --nr-azul-escuro: #12328C;
    --nr-azul-10: #EDF1FE;
    --nr-grafite: #1B1B1D;
    --nr-cinza-texto: #6E6E72;
    --nr-neutro: #F4F4F2;
    --nr-branco: #FFFFFF;
    --nr-borda: #E3E3DF;

    /* --- Superfícies da área interna ---
       Tom mais claro que o neutro da marca, para a tela respirar: o conteúdo
       fica sobre o fundo e os painéis brancos se destacam sem precisar de sombra. */
    --nr-fundo-app: #FAFAF8;
    --nr-borda-suave: #ECECE9;
    --nr-hover-suave: #F4F4F2;

    /* --- Fundos dos ícones e etiquetas de estado ---
       Versões bem claras das cores de estado, para servirem de fundo sem
       competir com o dado que está sendo mostrado. */
    --nr-fundo-neutro: #EFEFEC;
    --nr-fundo-ok: #ECF5F1;
    --nr-fundo-atencao: #FBF3E6;
    --nr-fundo-erro: #FDF2F2;
    --nr-cinza-fraco: #6E6E72;

    /* --- Linhas da grade ---
       A zebra usa o próprio neutro da marca; o hover é um azul bem lavado,
       para destacar a linha sem competir com o dado. */
    --nr-linha-par: #F6F6F3;
    --nr-linha-hover: #F1F4FD;

    /* --- Estados (uso restrito a dados, conforme o manual) --- */
    --nr-estado-ok: #0F6B4F;         /* em estoque */
    --nr-estado-atencao: #9A6412;    /* abaixo do mínimo */
    --nr-estado-erro: #A83232;       /* esgotado */
    --nr-estado-transito: #1E4FD8;   /* em trânsito */
    --nr-erro-fundo: #FDF2F2;

    /* --- Menu lateral (fundo escuro, cor sob medida) --- */
    --nr-menu-fundo: #121B37;
    --nr-menu-texto: rgba(255, 255, 255, 0.95);
    --nr-menu-texto-suave: rgba(255, 255, 255, 0.75);
    --nr-menu-texto-fraco: rgba(255, 255, 255, 0.52);
    --nr-menu-hover: rgba(255, 255, 255, 0.09);
    --nr-menu-borda: rgba(255, 255, 255, 0.14);

    /* --- Barra superior (fundo claro, cor sob medida) ---
       Cinza médio, não branco: dá pra distinguir do conteúdo mesmo sem o
       menu escuro do lado para servir de referência. Texto escuro, o
       oposto do menu — os dois "chromes" agora têm luminância diferente. */
    --nr-topo-fundo: #fff;
    --nr-topo-texto: var(--nr-grafite);
    --nr-topo-texto-fraco: rgba(27, 27, 29, 0.62);
    --nr-topo-hover: rgba(27, 27, 29, 0.08);
    --nr-topo-borda: rgba(27, 27, 29, 0.18);

    /* --- Tipografia --- */
    --nr-fonte: "Space Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --nr-fonte-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

    --nr-display: 700 2.5rem/1.15 var(--nr-fonte);
    --nr-titulo: 600 1.5rem/1.3 var(--nr-fonte);
    --nr-subtitulo: 500 1.0625rem/1.45 var(--nr-fonte);
    --nr-corpo: 400 0.9375rem/1.6 var(--nr-fonte);
    --nr-rotulo: 500 0.8125rem/1.4 var(--nr-fonte);

    /* --- Raios --- */
    --nr-raio-campo: 8px;
    --nr-raio-cartao: 12px;
    --nr-raio-painel: 16px;
    --nr-raio-pill: 999px;

    /* --- Sombras --- */
    --nr-sombra-overlay: 0 6px 16px rgba(27, 27, 29, 0.08);
    --nr-sombra-modal: 0 24px 48px rgba(27, 27, 29, 0.18);

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

    /* --- Foco visível (acessibilidade) --- */
    --nr-foco: 0 0 0 3px rgba(30, 79, 216, 0.25);

    --nr-transicao: 160ms ease;
}