/* =====================================================================
   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.
   ===================================================================== */

:root {

  /* ===================================================================
     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 */
  /* Era #3c7d1c. No branco ele passava (5.07:1), mas o verde de texto quase
     nunca cai no branco: cai num chip de fundo verde lavado, e cada plugin
     lava o seu num tom diferente (#ebf3e3, #e9f2e0, #e4eddf). Ali ele dava
     4.46 / 4.41 / 4.22 — os três ABAIXO de 4.5, em 100 medições. Calibrado
     contra o pior desses fundos e não contra o branco: 6.35 no branco,
     5.58 / 5.51 / 5.28 nos três chips. */
  --pk-green-ink:    #356c16;
  --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 */
  /* Era #8a94a6, com o aviso escrito ao lado de que dava 3.06:1 e "só devia
     ser usado em meta, placeholder e ícone decorativo". O aviso não segurou
     nada: medidos 75 textos de verdade pintados com ele, em 10 telas de 7
     plugins — rótulo de campo, cabeçalho de tabela, descrição de painel.
     Um token que reprova sozinho e depende de disciplina para não ser usado
     é um token errado; o certo é ele passar em qualquer uso.
     #646c7d passa nas três superfícies do claro: 5.27 no branco, 5.05 no
     card (#f9fafc) e 4.66 no fundo da página (#eef1f6). Continua sendo o
     mais fraco dos três degraus — --pk-ink-2 dá 7.58 no branco. */
  --pk-ink-3:  #646c7d;

  /* ===================================================================
     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 */

  /* ===================================================================
     ESPAÇO — a escala áurea (Fibonacci, razão ≈ 1,618)

     🔴 ATÉ 2026-08-31 O PADRÃO PUBLICAVA DOIS VALORES DE ESPAÇO, e o parque
     tinha 2.986 declarações de espaçamento das quais 15 (0,50%) usavam token:
     64 formas distintas de `gap`, 355 de `padding`, 45 de `margin-bottom`.
     48,6% dos gaps em px ficavam fora de qualquer grade de 4, e 10,5% eram
     ímpares. Não era escala: era acaso, um número por decisão.

     Esta escala NÃO foi inventada aqui. Ela já existia no parque, fora do
     namespace: `paineltec/public/css/paineltec.css:31` declara 8/13/21/34 com
     as razões 1,625 / 1,615 / 1,619 e o motivo escrito ao lado. Era a única
     progressão geométrica de espaço do parque inteiro. O que se faz aqui é
     promovê-la ao padrão e estender as pontas.

     Por que Fibonacci e não a grade de 4/8 da indústria: os degraus da grade
     de 8 (8, 16, 24, 32) crescem devagar demais no meio e rápido demais no
     fim, e o parque provou isso sozinho — 8px e 10px e 12px e 14px e 16px
     todos em uso, porque nenhum degrau ficava no lugar certo. Com razão
     constante, cada degrau é visivelmente diferente do anterior e não há
     tentação de inventar um valor entre dois.
     =================================================================== */
  /* ⚠️ NÃO existe degrau abaixo de 5px, e isso é limite da escala, não falta.
     Espaço de "colar" (1 a 3px — um rótulo grudado no seu valor) fica LITERAL.
     Medido em 2026-09-01: uma varredura automática mapeou 21 declarações de
     2 e 3px para este degrau, o que é +150% e +67% num espaço que era apertado
     de propósito. Revertidas. Trocar por token só quando o degrau estiver a
     poucos px do valor original. */
  --pk-sp-1:  5px;   /* colar: ícone e o rótulo dele */
  --pk-sp-2:  8px;   /* dentro de uma peça: linhas de um card */
  --pk-sp-3: 13px;   /* entre peças irmãs: campos de um formulário */
  --pk-sp-4: 21px;   /* entre grupos: o vão da grade de ladrilhos */
  --pk-sp-5: 34px;   /* entre seções da página */
  --pk-sp-6: 55px;   /* respiro de página */

  /* ⚠️ OS DOIS NOMES ANTIGOS FICAM COM O VALOR QUE SEMPRE TIVERAM. A primeira
     tentativa foi apontá-los para o degrau mais próximo (`--pk-sp-4` e
     `--pk-sp-5`), e ela foi revertida ao medir o alcance: `--pk-space` alimenta
     `--glpi-content-margin` em `portalpcnet/public/skin/tokens.css:111`, ou
     seja, a margem de conteúdo do helpdesk que **1.512 clientes** veem. Trocar
     16 por 21 ali é mudança de produção que ninguém pediu, escondida dentro de
     uma renomeação de token.

     São 14 usos no parque. Eles migram para a escala UM A UM, com a tela
     conferida — não por aliasing. Enquanto não migrarem, estes dois são o
     vocabulário legado e continuam corretos onde estão. */
  --pk-space:    16px;   /* legado — respiro entre cards da mesma grade */
  --pk-space-in: 28px;   /* legado — 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" */
  /* 🔴 NUNCA use var(--pk-blur) DENTRO de backdrop-filter: o WebKit (todo iPhone,
     inclusive Chrome e Firefox no iOS) descarta a propriedade INTEIRA quando ela
     tem var(), sem erro nenhum — o vidro some. Escreva o valor literal
     `blur(16px) saturate(1.3)`, com o prefixo -webkit-. Este token fica como
     registro do valor canônico. */

  /* 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 em 2026-09-22.
     Ninguém o usava, e o DESIGN.md 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;
}