/* =====================================================================
   PADRÃO VISUAL PCNET · CAMADA 1 — TOKENS
   Tema CLARO. Não existe variante escura, e isso é decisão, não omissão:
   ver "Por que claro" em references/tokens.md.

   Este arquivo é o CONTRATO. Componentes, efeitos e qualquer skin de tela
   de terceiro consomem daqui e nunca escrevem uma cor à mão.

   ---------------------------------------------------------------------
   O PREFIXO --pk-* É OBRIGATÓRIO, e não é preferência de estilo.
   Neste servidor, dois plugins (lansentinelbackups/public/style.css e
   dashboardfirewall/public/css/dashboard.css) declaram em :root GLOBAL
   exatamente --bg-primary, --bg-surface, --pcnet-green, --text-primary e
   --font-display — com valores ESCUROS (#0d1a0d, #162816). Um nome sem
   prefixo entra nessa loteria: quem carregar por último vence, sem erro no
   console e sem nada quebrado para culpar. Com --pk-* a colisão fica
   impossível por construção, não apenas improvável.
   ---------------------------------------------------------------------

   ESCOPO DO SELETOR — escolha uma das duas linhas conforme o caso:

     a) Tela sua, HTML seu           → :root { … }        (o padrão daqui)
     b) Tela de terceiro que você repinta (GLPI, WordPress, um app legado):
        troque por  html:root:has(> body:not(.SELETOR-QUE-FICA-DE-FORA))
        Declare em <html>, NUNCA em <body>: custom property é substituída no
        elemento onde é DECLARADA, e frameworks derivam tokens no :root com
        color-mix()/hsl-from. Redeclarando na <body>, os derivados guardam o
        valor antigo e metade da interface fica na cor velha.
   ===================================================================== */

html:root:has(> body:not(.central)) {

  /* ===================================================================
     1. MARCA
     O verde #8CC63F vem da logo PCNet e é o único valor que nunca muda.
     Os outros três são a escada de luminosidade que ele exige para ser
     usável: o verde puro tem contraste 1.9:1 contra o branco — bonito como
     preenchimento, ilegível como texto.
     =================================================================== */
  --pk-green:        #8CC63F;   /* preenchimento: botão primário, ponto ativo do stepper */
  --pk-green-hover:  #7eb831;   /* hover do preenchimento — ver a armadilha logo abaixo */
  --pk-green-dark:   #459535;   /* ícone e traço — 3.75:1 no branco, passa como alvo gráfico */
  --pk-green-ink:    #356c16;   /* TEXTO verde. Calibrado contra o chip verde
                                   lavado, não contra o branco: 6.35 no branco,
                                   5.28 no pior chip do parque. */
  --pk-green-soft:   #eef7e2;   /* fundo de chip, item ativo, balão do cliente */
  --pk-green-line:   #cfe6ad;   /* borda de superfície -soft (era literal em 2 lugares) */
  --pk-on-green:     #143a05;   /* TEXTO SOBRE o verde cheio — 6.27:1 no -green,
                                   5.37:1 no -green-hover. Nunca use #fff aqui:
                                   branco sobre #8CC63F dá 1.9:1, reprovado. */

  /* ARMADILHA MEDIDA — escurecer o fundo no hover parece a coisa óbvia, e reprova.
     `background: --pk-green-dark; color: #fff` dá 3.75:1, e com --pk-on-green
     piora para 3.42:1. O botão fica ilegível justo enquanto está sob o cursor.
     Por isso existe --pk-green-hover: um degrau só, que mantém 5.37:1 com o
     mesmo texto. --pk-green-dark é para ÍCONE e TRAÇO, não para fundo de texto. */

  --pk-on-dark:      #ffffff;   /* texto sobre preenchimento escuro (danger) — 4.83:1 */

  /* ===================================================================
     2. SUPERFÍCIES
     Fundo cinza-azulado NEUTRO, não esverdeado. Um fork (dashboardcliente)
     usou #f0fdf4 — verde-menta — e o resultado é que o verde da marca deixa
     de destacar: quando o fundo já é verde, o botão verde some. O neutro faz
     a marca render.
     =================================================================== */
  --pk-bg:           #eef1f6;   /* fundo da página */
  --pk-surface:      #ffffff;   /* card, painel, modal */
  --pk-surface-2:    #f6f8fb;   /* superfície rebaixada: input desabilitado, thead, zebra */

  --pk-border:       #e3e8ef;   /* borda neutra: input, separador, lista */
  --pk-border-hover: #cdd6e2;

  /* A HAIRLINE VERDE é a assinatura da casa. Card não leva borda cinza: leva
     uma linha verde quase invisível, que a 12% de alfa lê como "sombra colorida"
     em vez de contorno. É o que diferencia uma tela PCNet de um Bootstrap padrão. */
  --pk-hairline:       rgba(60, 90, 40, .12);
  --pk-hairline-hover: rgba(60, 90, 40, .24);

  /* ===================================================================
     3. TINTA
     Três níveis, e só três. Um quarto nível de cinza sempre vira ilegível.
     =================================================================== */
  --pk-ink:    #1d2433;   /* corpo de texto e títulos — 15.53:1 no branco */
  --pk-ink-2:  #5b6678;   /* secundário, rótulo de campo — 5.81:1 */
  --pk-ink-3:  #646c7d;   /* Meta, placeholder e ícone decorativo — 5.27:1.
                             O valor anterior (#8a94a6) dava 3.06:1 e trazia o
                             aviso de "não usar em texto"; aviso não segurou
                             nada, e 75 textos de verdade o usavam. */

  /* ===================================================================
     4. SEMÂNTICAS
     Cada família tem 4 tokens — cheio / suave / linha / tinta — porque um
     aviso precisa dos quatro: fundo suave, borda que o delimite, e um texto
     escuro o bastante para ser lido SOBRE aquele fundo suave (não sobre o
     branco). Paletas com só a cor "cheia" acabam com texto laranja em fundo
     laranja-claro, que reprova sempre.
     Verde é o "sucesso": não existe --pk-success, use a família da marca.
     =================================================================== */
  --pk-info:         #2e7dd1;
  --pk-info-soft:    #e7f0fb;
  --pk-info-line:    #c3ddf5;
  --pk-info-ink:     #1d4ed8;   /* 5.83:1 sobre -soft */

  --pk-warning:      #d97706;
  --pk-warning-soft: #fff8e8;
  --pk-warning-line: #f1dca0;
  --pk-warning-ink:  #6b5314;   /* 6.91:1 sobre -soft */

  --pk-danger:       #dc2626;   /* 4.83:1 no branco — serve como texto de erro de campo */
  --pk-danger-soft:  #fff1f1;
  --pk-danger-line:  #f3c7c7;
  --pk-danger-ink:   #b42318;   /* 5.98:1 sobre -soft */

  /* ===================================================================
     5. TIPOGRAFIA
     Outfit para tudo; monoespaçada SÓ para identificador (nº de chamado,
     código). A fonte tem de ser SERVIDA LOCALMENTE — ver references/tokens.md,
     seção "Fontes": rede de cliente pode bloquear fonts.googleapis.com, e um
     CDN de fonte registra o IP de cada usuário (LGPD).
     =================================================================== */
  --pk-font:      'Outfit', 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --pk-font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Escala tipográfica — 7 degraus, e a base é 16px.
     Os meios-pixels não são acidente: a escala inteira foi subida ~9% sobre a
     base de 16 para um público que lê a tela de longe (helpdesk em monitor de
     recepção). Reduzir para valores redondos encolhe a interface toda. */
  --pk-text-xs:   12.5px;   /* rótulo de status, legenda */
  --pk-text-sm:   14.5px;   /* meta, dica de campo */
  --pk-text-base: 16px;     /* rótulo de formulário, navegação */
  --pk-text-md:   17.5px;   /* CORPO: input, texto de card, botão */
  --pk-text-lg:   20.5px;   /* subtítulo */
  --pk-text-xl:   23px;     /* título de card */
  --pk-text-2xl:  25.5px;   /* título de painel / de página */

  --pk-leading-tight: 1.2;
  --pk-leading:       1.45;
  --pk-leading-loose: 1.6;  /* textarea e corpo longo */

  /* ===================================================================
     6. FORMA
     Quatro raios, hierárquicos: quanto maior a superfície, maior o canto.
     Misturar raios na mesma tela é o erro que mais denuncia "vários autores".
     =================================================================== */
  --pk-radius:      16px;     /* card, painel, modal, dropdown */
  --pk-radius-sm:   12px;     /* input, botão, chip */
  --pk-radius-xs:   10px;     /* item de menu, opção de combobox */
  --pk-radius-pill: 9999px;   /* status, avatar, badge de contagem */

  --pk-space:    16px;   /* respiro entre cards da mesma grade */
  --pk-space-in: 28px;   /* padding interno de painel (18px em ≤600px) */

  /* ===================================================================
     7. ELEVAÇÃO
     Duas famílias distintas, e confundi-las é o erro comum:
       · shadow-sm/md/lg — sombra NEUTRA de UI. Dropdown, toast, popover.
       · shadow-rest/float — a sombra VERDE-ESCURA e profunda dos cards do
         portal. É deliberadamente forte: os cards flutuam sobre uma malha
         decorativa e uma sombra tímida some contra ela.
     Fork que trocou a sombra neutra por uma esverdeada em TODA a UI deixou
     a tela com aparência de estar "suja"; a esverdeada é só para o card
     grande sobre fundo decorado.
     =================================================================== */
  --pk-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --pk-shadow-md: 0 2px 6px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .08);
  --pk-shadow-lg: 0 10px 30px rgba(16, 24, 40, .12);

  --pk-shadow-rest:  0 16px 34px rgba(16, 38, 6, .42);   /* repouso do card sobre malha */
  --pk-shadow-float: 0 20px 40px rgba(16, 38, 6, .50);   /* extra que aparece no hover */

  /* Brilho do botão primário: a sombra é da COR DA MARCA, não neutra — é o que
     faz o botão parecer aceso em vez de recortado. Exclusiva do botão. */
  --pk-shadow-green:       0 2px 6px  rgba(140, 198, 63, .40);
  --pk-shadow-green-hover: 0 6px 16px rgba(140, 198, 63, .50);

  /* Anel de foco. NÃO É OPCIONAL e não se remove: o outline padrão do
     navegador desaparece contra fundo claro, e sem ele a tela fica
     inoperável por teclado. */
  /* A COR do anel sai separada do box-shadow porque frameworks pedem só a cor:
     o Tabler consome --tblr-focus-ring-color, que não aceita um box-shadow
     inteiro. Sem este token, todo remapeamento reescreve o rgba à mão. */
  --pk-focus-color:  rgba(140, 198, 63, .25);
  --pk-focus:        0 0 0 3px var(--pk-focus-color);
  --pk-focus-danger: 0 0 0 3px rgba(220, 38, 38, .12);

  /* Lavagem verde a 8% — fundo de linha em hover, item de lista sob o cursor.
     Mais leve que --pk-green-soft, que já lê como "selecionado". */
  --pk-green-wash:   rgba(140, 198, 63, .08);

  /* As COMPONENTES DE COR sozinhas, sem a sombra montada.
     Existem porque nem todo hospedeiro aceita um box-shadow pronto: o Tabler
     pede --tblr-focus-ring-color, que é uma <color> e compõe a sombra por
     conta própria. Sem estes tokens, um skin é obrigado a escrever o rgba() à
     mão — e o valor do foco passa a existir em dois lugares que ninguém mantém
     em sincronia. Mesma razão para o realce de hover de linha/item. */
  --pk-focus-ring: rgba(140, 198, 63, .25);   /* = a cor dentro de --pk-focus */
  --pk-hover-bg:   rgba(140, 198, 63, .08);

  /* ===================================================================
     8. VIDRO (glassmorphism)
     Branco translúcido + desfoque. Só rende se houver algo atrás para
     atravessar — sobre fundo chapado é custo de GPU sem ganho nenhum.
     Ver references/efeitos.md antes de usar.
     =================================================================== */
  --pk-glass:     rgba(255, 255, 255, .72);   /* card */
  --pk-glass-2:   rgba(255, 255, 255, .85);   /* card em hover */
  --pk-glass-bar: rgba(255, 255, 255, .82);   /* barra fixa: mais opaco, precisa ser legível */
  --pk-blur:      blur(16px) saturate(1.3);   /* o saturate é o que separa "vidro" de "borrão" */

  /* Vidro líquido: sombra INTERNA diagonal — brilho no canto superior-esquerdo,
     sombra no inferior-direito. Sobre elemento TRANSPARENTE (ver efeitos.md). */
  --pk-glass-inset: inset  6px  6px 14px rgba(255, 255, 255, .40),
                    inset -6px -6px 14px rgba(0, 0, 0, .10);

  /* ===================================================================
     9. MOVIMENTO
     Uma duração e uma curva para a interface inteira. Transição que varia de
     componente para componente é o que faz uma tela parecer montada por
     pessoas diferentes — que é exatamente o problema que este padrão resolve.
     =================================================================== */
  --pk-ease: .22s cubic-bezier(.4, 0, .2, 1);

  /* Duas exceções com endereço, e só duas:
     · -fast  para painel que abre/fecha — 220ms num menu lê como lentidão;
     · -slow  para a sombra flutuante, que precisa sumir devagar o bastante
       para não dar snap quando o cursor sai (ver efeitos.md). */
  --pk-ease-fast: .18s ease;
  --pk-ease-slow: .5s ease;

  /* Sem curva com mola (overshoot): o `--pk-ease-bounce` saiu do host e desta
     cópia em 2026-09-23. Ninguém o usava, e o DESIGN.md do pcnetui proíbe
     easing que passa do ponto e volta. */

  /* ===================================================================
     10. STATUS DE CHAMADO (ITIL)
     Um estado = uma cor, igual em toda superfície. Três tokens por estado:
     -bg e -ink formam o chip (texto sobre fundo suave); o cheio preenche
     barra de gráfico.

     A REGRA QUE VALE MAIS QUE A PALETA: status nunca é comunicado só por
     cor. Sempre ícone + rótulo escrito. Em deuteranopia o par
     "solucionado × pendente" cai para ~7 de separação, que só é seguro COM
     codificação secundária.

     "Encerrado" é CINZA de propósito. Uma primeira versão pintou solucionado
     e fechado do mesmo verde, e o QA visual pegou: numa lista, um chamado
     fechado ficou idêntico a um em andamento. As duas famílias — vivo e
     encerrado — precisam se separar à distância.
     =================================================================== */
  --pk-st-novo:        var(--pk-info);
  --pk-st-novo-bg:     var(--pk-info-soft);
  --pk-st-novo-ink:    var(--pk-info-ink);

  --pk-st-andamento:      var(--pk-green-dark);
  --pk-st-andamento-bg:   var(--pk-green-soft);
  --pk-st-andamento-ink:  var(--pk-green-ink);

  --pk-st-pendente:     var(--pk-warning);
  --pk-st-pendente-bg:  var(--pk-warning-soft);
  --pk-st-pendente-ink: var(--pk-warning-ink);

  --pk-st-solucionado:     var(--pk-green-ink);
  --pk-st-solucionado-bg:  var(--pk-green-soft);
  --pk-st-solucionado-ink: var(--pk-green-ink);

  --pk-st-fechado:     var(--pk-ink-2);
  --pk-st-fechado-bg:  var(--pk-surface-2);
  --pk-st-fechado-ink: var(--pk-ink);

  /* ===================================================================
     11. VERDES DECORATIVOS (malha de fundo)
     Escada de tons da logo, usada SÓ pelo fundo animado. Não são cores de
     interface e não devem vazar para componente nenhum: são claras demais
     para texto e saturadas demais para superfície.
     =================================================================== */
  --pk-mesh-1: #6aa832;
  --pk-mesh-2: #78b840;
  --pk-mesh-3: #a8c840;
  --pk-mesh-4: #b2d977;
  --pk-mesh-5: #d0e7ad;
}