/* =====================================================================
   Tokens da identidade NewIO
   =====================================================================

   ATENÇÃO — ESTE ARQUIVO É UM ACRÉSCIMO, não veio do sistema original.

   No servicedesk-newio o `app.css` define apenas quatro variáveis no
   `:root` (--brand-navy, --accent-teal, --text-secondary,
   --surface-primary). O resto da paleta está escrito à mão ao longo de
   5.000 linhas, e três variáveis são USADAS sem nunca terem sido
   DEFINIDAS: --text-primary, --surface-card e --border-color. Elas
   funcionam por acaso, porque quem as usou escreveu um valor de reserva:

       color: var(--text-primary);            <- vira "inherit"
       background: var(--surface-card, #fff); <- cai no #fff

   Num projeto novo isso vira armadilha: a primeira regra que esquecer o
   valor de reserva quebra em silêncio. Este arquivo fecha o buraco.

   COMO USAR: carregue tokens.css ANTES de app.css.

       <link rel="stylesheet" href="/css/tokens.css">
       <link rel="stylesheet" href="/css/app.css">
       <link rel="stylesheet" href="/css/servicedesk.css">

   Os valores abaixo foram extraídos das cores realmente usadas no
   sistema — não são invenção, são o que já está na tela.
   ===================================================================== */

:root {
    /* ---- Marca ---- */
    --brand-navy:        #183b90;  /* azul NewIO — títulos, links, ações */
    --brand-navy-claro:  #8aa0e6;  /* navy sobre fundo escuro */
    --accent-teal:       #00b8c0;  /* destaque, foco, estado ativo */

    /* ---- Texto ---- */
    --text-primary:      #262c36;  /* corpo do texto */
    --text-secondary:    #a3aed0;  /* apoio, legendas, rótulos */
    --text-muted:        #6b7480;  /* desabilitado, marca d'água */

    /* ---- Superfícies ---- */
    --surface-primary:   #f4f7fe;  /* fundo da página */
    --surface-card:      #ffffff;  /* cartões, tabelas, formulários */
    --surface-suave:     #eef2f9;  /* faixas, cabeçalho de tabela */
    --border-color:      #e6ebf5;  /* divisórias e contornos */

    /* ---- Estado ---- */
    --estado-ok:         #16a34a;
    --estado-ok-forte:   #18b56a;
    --estado-aviso:      #f5a623;
    --estado-erro:       #e6353d;
    --estado-erro-suave: #fdecec;
    --estado-info:       #0ea5e9;
    --estado-neutro:     #9aa3b2;

    /* ---- Prioridade / criticidade ----
       A mesma escala usada em chamado, ambiente e situação de ativo.
       Vale manter idêntica entre produtos: quem opera um reconhece o
       outro sem reaprender a cor. */
    --prioridade-baixa:   #22c55e;
    --prioridade-media:   #eab308;
    --prioridade-alta:    #f97316;
    --prioridade-critica: #ef4444;

    /* ---- Tipografia ----
       Inter para interface, DM Sans para títulos. As duas vêm do Google
       Fonts; o link está em layout/head.html. */
    --fonte-interface: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fonte-titulo:    'DM Sans', 'Inter', sans-serif;
    --fonte-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- Forma ---- */
    --raio-pequeno: 6px;
    --raio-medio:   10px;
    --raio-grande:  16px;
    --sombra-card:  0 2px 12px rgba(24, 59, 144, .06);
    --sombra-flutuante: 0 8px 28px rgba(24, 59, 144, .12);
}

/* ---------------------------------------------------------------------
   Modo escuro

   No sistema original o modo escuro é a classe `.dark-mode` no <html>,
   persistida no usuário. Redefinir os tokens aqui faz o tema inteiro
   virar sem precisar de uma segunda folha de estilo.
   --------------------------------------------------------------------- */
.dark-mode {
    --text-primary:    #e8ecf4;
    --text-secondary:  #99a2b3;
    --text-muted:      #8b93a3;

    --surface-primary: #171b22;
    --surface-card:    #1f242e;
    --surface-suave:   #2b323d;
    --border-color:    rgba(255, 255, 255, .12);

    --sombra-card:     0 2px 12px rgba(0, 0, 0, .35);
    --sombra-flutuante: 0 8px 28px rgba(0, 0, 0, .45);
}