/* NetFibra Tech — tokens de design (fonte única de verdade)
   ---------------------------------------------------------------------
   Este arquivo carrega primeiro, em TODAS as páginas (produto, login,
   erro, documentos legais, impressão e Admin), e é a única declaração de
   :root do sistema: cor, tipografia, espaçamento, elevação e estrutura
   saem daqui. Nenhuma outra folha declara cor, família ou peso de fonte
   — um teste (apps/dashboard/tests/test_tokens_sem_cor_solta.py) falha
   se alguma voltar a declarar.

   Como o arquivo está organizado:

     1. @font-face          — a fonte do produto e a reserva com métricas
     2. :root               — valores de origem, em hexadecimal
     3. :root               — DERIVADOS e PAPÉIS (calculados da base)
     4. @supports (oklch)   — a MESMA paleta, em OKLCH, para navegadores
                              que a leem; é a camada canônica

   ---------------------------------------------------------------------
   POR QUE DUAS NOTAÇÕES DA MESMA COR

   A paleta foi calibrada em OKLCH, onde "brilho percebido" (L) tem
   número: superfícies em degraus iguais de L, os cinco estados na mesma
   faixa de L, as sete cores categóricas com L e C idênticos. Em HSL isso
   não existe (amarelo a 50% parece muito mais claro que azul a 50%), e
   foi por isso que a paleta anterior parecia desequilibrada mesmo com
   todos os contrastes aprovados.

   O navegador que entende oklch() e a sintaxe relativa
   `oklch(from var(--x) l c h / a)` recebe a paleta nessa forma, dentro de
   @supports — e os véus, contornos e anéis são DERIVADOS da cor de
   origem, sem duplicar nada. O navegador que não entende recebe a mesma
   paleta em hexadecimal e os véus em rgba(var(--x-rgb), a): exatamente o
   que estava na tela antes. A conversão entre as duas é conferida pelo
   teste, canal a canal (tolerância de 1/255). Quem mexe numa cor mexe no
   oklch e corrige o hex que o teste pedir.

   ---------------------------------------------------------------------
   IDENTIDADE NETFIBRA

   Uma cor de marca, laranja (OKLCH H≈42, a do símbolo do logo), sobre um
   fundo neutro — o site da empresa é 95% preto, branco e cinza, e é essa
   proporção que o produto copia: marca em área pequena (navegação ativa,
   foco, botão principal, logo, link), ground neutro, cor de estado
   reservada para estado.

   A MARCA NÃO CODIFICA ESTADO. Estado é um dos quatro — verde normal,
   âmbar atenção, vermelho crítico, azul informação —, sempre com o rótulo
   escrito ao lado. Laranja é vizinha de âmbar e de vermelho, então os
   dois foram afastados dela (atenção em H=96, crítico em H=4) e ficaram
   os mesmos em todo o sistema; antes mudavam de matiz dentro da
   Dashboard, e um "ATENÇÃO" não tinha a mesma cor em duas telas.

   ---------------------------------------------------------------------
   CONFORTO VISUAL

   O painel fica aberto o dia inteiro, em monitor e em TV de NOC:

   - o fundo não é preto absoluto, para o texto claro não "sangrar" em
     tela OLED; o texto não é branco puro pelo mesmo motivo (12,8:1 sobre
     o cartão, não 15);
   - preenchimentos grandes usam o degrau --nf-brand-dim, um passo
     abaixo, porque o que cansa é a ÁREA e não o tom;
   - nenhum par de texto sobre superfície fica abaixo de 4,5:1 — inclusive
     o texto mais apagado sobre a superfície mais clara (--nf-faint sobre
     --nf-surface-3: 4,6:1; era 4,3 e foi o único par reprovado da
     auditoria).

   Os contrastes citados nos comentários são sobre --nf-surface (o cartão),
   que é onde a maior parte do texto do produto vive.
   */


/* =====================================================================
   1. FONTE

   Inter 4.1, variável (peso 100–900), subconjunto latino, servida pelo
   próprio sistema (static/vendor/inter/4.1/, com procedência e hash).
   Até aqui a pilha era a do sistema operacional: Segoe no Windows, SF no
   Mac, Roboto no Android — três larguras e três curvas de peso para o
   mesmo painel, dependendo da máquina da equipe. Uma fonte só é o que
   faz as telas parecerem um produto em qualquer lugar.

   font-display: swap — o texto aparece imediatamente na reserva e troca
   quando a Inter chega (118 KB, uma vez; depois vem do cache). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/inter/4.1/InterVariable-latin.woff2") format("woff2");
}

/* A reserva com as métricas da Inter. Arial (ou a Liberation Sans, que é
   metricamente idêntica a ela) é mais estreita e tem ascendente menor;
   sem ajuste, a troca de fonte moveria cada linha da página. Os quatro
   números saem das tabelas hhea/OS/2 das duas fontes:
   size-adjust = larguraMédia(Inter) / larguraMédia(Arial), e os
   override são as métricas verticais da Inter divididas por ele. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 110.45%;
  ascent-override: 87.71%;
  descent-override: 21.84%;
  line-gap-override: 0%;
}


/* =====================================================================
   2. VALORES DE ORIGEM (hexadecimal — a camada canônica é a 5)
   ===================================================================== */
:root {
  /* ---------- Superfícies ----------
     Cada degrau é um passo de luminância acima do anterior (L 0,189 ->
     0,231 -> 0,260 -> 0,293), e é isso que separa as camadas: o contorno
     deixou de ser necessário em qualquer tela. */
  --nf-bg: #0b1324;
  --nf-bg-soft: #101728;
  --nf-surface: #151d2c;
  --nf-surface-2: #1d2432;
  --nf-surface-3: #262c38;
  --nf-surface-sunken: #111828;

  /* ---------- Texto ----------
     Quatro degraus sobre o cartão: 12,8 / 9,1 / 6,5 / 5,6 de contraste.
     O topo não é branco puro (rastro luminoso em OLED e TV); o piso é o
     texto MENOR da tela com o MENOR contraste — legenda, rodapé, ajuda de
     campo —, e por isso é o degrau que foi subido: 4,6:1 até sobre a
     superfície mais clara (--nf-surface-3). */
  --nf-text: #dadde4;
  --nf-text-soft: #b8bcc2;
  --nf-muted: #9b9fa5;
  --nf-faint: #91949b;
  /* Tinta dos contornos: um cinza-azulado claro, sempre em opacidade
     baixa (ver --nf-border). Não é texto: é mais frio que ele de
     propósito, para a linha não competir com a letra. */
  --nf-line: #a8b8d6;

  /* ---------- Marca ----------
     Ancorada no matiz do logo (#FF6000, OKLCH H=42). O croma do logo é
     0,209; aqui a escada fica em 0,135–0,175 porque o logo aparece uma
     vez e estes tokens aparecem a tela inteira.

     --nf-brand é TEXTO e ícone: área pequena, mantém a intensidade.
     --nf-brand-strong é o realce de estado ativo e hover.
     --nf-brand-dim é ÁREA: barra de gráfico, botão cheio, anel.
     --nf-brand-chrome é o marcador permanente (traço do item ativo do
     menu, ponto de status): mesma L e H da marca com 23% menos croma —
     quem olha vê a mesma marca, mais quieta.
     --nf-on-brand é a tinta POR CIMA do preenchimento de marca: 6,1:1
     sobre --nf-brand-dim. */
  --nf-brand: #fa773f;
  --nf-brand-strong: #ff9a6a;
  --nf-brand-dim: #d96b40;
  --nf-brand-chrome: #e8845c;
  --nf-on-brand: #1b0c06;

  /* ---------- Estados ----------
     Cor é significado, não enfeite: verde = normal, âmbar = atenção,
     vermelho = crítico, azul = informação/backup, roxo = categoria. Os
     cinco na mesma faixa de brilho (L 0,705–0,784) para a tela não
     "piscar" ao correr o olho entre cartões de estados diferentes.

     Daltonismo: âmbar e vermelho continuam próximos para deuteranopia e
     protanopia. Aqui a cor é redundante, não portadora — todo estado vem
     escrito (NORMAL, ATENÇÃO, ALERTA, Em andamento, Normalizado). */
  --nf-green: #43c37f;
  --nf-blue: #6bade4;
  --nf-yellow: #d1b852;
  --nf-red: #ed7295;
  --nf-purple: #b097de;

  /* ---------- Paleta categórica ----------
     Fatias de rosca, pontos de categoria: aqui a cor não tem significado
     de estado, só separa itens. Todas com o MESMO brilho (L=0,745) e a
     mesma intensidade (C=0,085), para que nenhuma fatia pareça mais
     importante que a outra. */
  --nf-cat-1: #7eb2df;
  --nf-cat-2: #7fbd96;
  --nf-cat-3: #bcad6d;
  --nf-cat-4: #db96a6;
  --nf-cat-5: #b4a0db;
  --nf-cat-6: #65bdbd;
  --nf-cat-7: #a29e99;

  /* ---------- Canais RGB (transitório) ----------
     As mesmas cores em componentes RGB, para o navegador sem oklch() e
     para as folhas que ainda escrevem rgba(var(--nf-x-rgb), α). Elas vão
     sendo trocadas pelos tokens -soft/-line/-wash ao longo das fases;
     quando a última sair, este bloco sai junto. Nenhuma folha declara
     componente de cor por conta própria. */
  --nf-bg-rgb: 11, 19, 36;
  --nf-surface-rgb: 21, 29, 44;
  --nf-line-rgb: 168, 184, 214;
  --nf-brand-rgb: 250, 119, 63;
  --nf-green-rgb: 67, 195, 127;
  --nf-blue-rgb: 107, 173, 228;
  --nf-yellow-rgb: 209, 184, 82;
  --nf-red-rgb: 237, 114, 149;
  --nf-purple-rgb: 176, 151, 222;
  --nf-cat-3-rgb: 188, 173, 109;
  --nf-cat-4-rgb: 219, 150, 166;
  --nf-cat-7-rgb: 162, 158, 153;

  /* Opacidades da marca que mudam entre um tema e outro: laranja pesa
     mais que verde na mesma opacidade, então o véu não pode ser o mesmo. */
  --nf-brand-wash-a: .028;
  --nf-brand-tint-a: .075;
  --nf-focus-a: .34;

  /* Véu neutro: fundo de linha e estado hover. */
  --nf-wash: rgba(255, 255, 255, .025);
  --nf-wash-strong: rgba(255, 255, 255, .05);

  /* ---------- Papel (tema claro da impressão) ----------
     O único tema claro do produto: a versão para impressão do relatório e
     o @media print das telas. A marca escurece até passar de 4,5:1 sobre
     branco como texto; o verde é só "Normalizado". Nomeados pelo papel,
     como os da tela. */
  --nf-paper: #ffffff;
  --nf-paper-desk: #e9edf0;
  --nf-paper-ink: #0b1015;
  --nf-paper-ink-soft: #3d4a55;
  --nf-paper-muted: #7f8c96;
  --nf-paper-head-soft: #c7d0d6;
  --nf-paper-line: #d9e0e5;
  --nf-paper-line-soft: #eef2f5;
  --nf-paper-zebra: #f6f8fa;
  --nf-paper-brand: #b35014;
  --nf-paper-brand-dark: #923100;
  --nf-paper-brand-tint: #fdefe4;
  --nf-paper-on-brand: #04110a;
  --nf-paper-success: #1a9c54;
  --nf-paper-success-dark: #10763d;
  --nf-paper-success-tint: #e9f9f0;
  --nf-paper-info: #2f7fd6;
  --nf-paper-info-tint: #e8f1fc;
  --nf-paper-warning: #c48a00;
  --nf-paper-warning-tint: #fff6dc;
  --nf-paper-danger: #d63a4a;
  --nf-paper-danger-tint: #fdeaec;
  --nf-paper-category: #7c5cd6;

  /* ---------- Tipografia ----------
     Uma família, declarada uma vez (ver @font-face). A reserva com
     métricas ajustadas vem logo depois; o resto da pilha é para o caso
     de a fonte não carregar nem a reserva local existir. */
  --nf-font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --nf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Números em coluna (KPI, tabela, hora): todos os dígitos com a mesma
     largura, para a coluna não dançar quando o valor muda. */
  --nf-numeric: tabular-nums;

  /* Escala por PAPEL de leitura. Cada degrau é clamp(piso, fluido, teto):
     o piso é o tamanho num notebook de 1366; o teto existe porque tela
     grande não pede letra proporcionalmente grande — pede MAIS INFORMAÇÃO
     legível. Os tetos são atingidos por volta de 2560px, então 1440p e 4K
     têm a MESMA tipografia e o 4K rende em quantidade, não em tamanho.

     A parte fluida cresce mais nos números do que no texto corrido: é o
     número que se lê de longe num telão de NOC. */
  --nf-fs-display: clamp(34px, 1.05vw + 19px, 46px);  /* índice do painel */
  --nf-fs-kpi: clamp(30px, 0.85vw + 18px, 40px);      /* valor de KPI */
  --nf-fs-hero: clamp(23px, 0.5vw + 16px, 30px);      /* título de página */
  --nf-fs-metric: clamp(22px, 0.45vw + 16px, 28px);   /* destaque no cartão */
  --nf-fs-metric-sm: clamp(18px, 0.3vw + 14px, 22px);
  --nf-fs-value: clamp(15px, 0.2vw + 12px, 18px);
  --nf-fs-control: clamp(14px, 0.15vw + 12px, 17px);
  --nf-fs-body: clamp(13px, 0.15vw + 11px, 15px);
  --nf-fs-caption: clamp(12px, 0.12vw + 10.5px, 14px);
  /* Piso do sistema: 12px. Era 11px, e 11px era o tamanho mais comum de
     texto de apoio — pequeno demais a um braço de distância e ilegível
     numa TV de operação. Nada no produto fica abaixo deste degrau. */
  --nf-fs-label: clamp(12px, 0.08vw + 11px, 13px);

  /* Papéis de título, por cima da escala: quem escreve componente escolhe
     o PAPEL (título de página, de seção, de cartão), e não o degrau. Os
     números são os mesmos de antes — o que muda é que agora há um nome
     só para cada nível da hierarquia, em todas as telas. */
  --nf-fs-title: var(--nf-fs-display);      /* título principal: login, erro */
  --nf-fs-page: var(--nf-fs-hero);          /* h1 do cabeçalho de página */
  --nf-fs-section: var(--nf-fs-metric-sm);  /* h2 de seção */
  --nf-fs-card: var(--nf-fs-value);         /* h3 de cartão */
  --nf-fs-secondary: var(--nf-fs-caption);  /* ajuda, contexto, meta */

  /* Peso: quatro, em degraus de 100. A Inter é mais robusta que as fontes
     de sistema no mesmo peso nominal — 600 dela lê como o 700 de antes —,
     e a auditoria encontrou 146 regras em 700+ e caixa alta em 800 ou 900,
     que fecha a contraforma das letras e piora justamente o texto que
     queria destacar. Nenhuma folha escreve peso em número: só estes. */
  --nf-weight-body: 400;
  --nf-weight-medium: 500;   /* rótulo, item de menu, texto destacado */
  --nf-weight-strong: 600;   /* valor, título de cartão e de seção */
  --nf-weight-bold: 700;     /* KPI, título de página, b/strong */

  --nf-lh-tight: 1.15;       /* números e títulos de uma linha */
  --nf-lh-heading: 1.25;     /* títulos que podem quebrar */
  --nf-lh-body: 1.55;        /* texto corrido */
  /* Caixa alta pede espaçamento entre letras, mas .1em deixava os rótulos
     com cara de carimbo; .06em é o que Linear e Grafana usam. */
  --nf-tracking-label: .06em;

  /* ---------- Espaçamento ----------
     Escala de 4px. O nome é o PAPEL, não o número: quem escreve componente
     escolhe entre "colado", "confortável" e "separado", e não entre 11px e
     13px. Os apelidos numéricos existem para a migração e para o caso em
     que a escala é mesmo o que se quer. */
  --nf-space-1: 4px;
  --nf-space-2: 8px;
  --nf-space-3: 12px;
  --nf-space-4: 16px;
  --nf-space-5: 20px;
  --nf-space-6: 24px;
  --nf-space-7: 32px;
  --nf-space-8: 40px;
  --nf-space-9: 56px;

  --nf-gap-tight: var(--nf-space-2);
  --nf-gap: var(--nf-space-3);
  --nf-gap-loose: var(--nf-space-5);
  --nf-pad-card: var(--nf-space-5);
  --nf-pad-card-tight: var(--nf-space-4);
  --nf-pad-cell: var(--nf-space-3) var(--nf-space-4);
  --nf-pad-control: 0 var(--nf-space-4);
  --nf-stack: var(--nf-space-5);        /* entre blocos de uma página */
  --nf-stack-loose: var(--nf-space-7);  /* entre seções da página */

  /* ---------- Estrutura ---------- */
  --nf-sidebar: 264px;

  /* ---------- Grade fluida ----------
     Quem decide quantas colunas cabem é o ESPAÇO, não o ponto de quebra:
     cada grade declara o piso do seu tipo de bloco e o navegador divide o
     resto. O piso é a largura abaixo da qual aquele bloco deixa de ser
     legível, medida no conteúdo real que ele carrega. */
  --nf-col-kpi: 210px;    /* rótulo + número curto */
  --nf-col-card: 300px;   /* cartão de lista ou texto */
  --nf-col-panel: 380px;  /* cartão com gráfico, medidor ou rosca */
  --nf-col-table: 460px;  /* tabela: precisa de coluna para os valores */

  /* ---------- Réguas de largura ----------
     Três tipos de página, três réguas:

     Operação (Cockpit e Dashboards): a tela é o instrumento. O teto é
     alto — em 3440 sobra pouco, em 3840 sobra uma margem — e em TELA
     CHEIA ele é removido: quem pediu a tela inteira quer a tela inteira.

     Formulário (configuração, conta, hosts): confortável, sem a linha de
     um campo atravessar um monitor inteiro.

     Leitura (relatórios, documentos, privacidade): a linha longa demais
     cansa; 72 caracteres é a medida de livro. */
  --nf-measure-wide: 3200px;
  --nf-measure-form: 1180px;
  --nf-measure-text: 880px;   /* o contêiner da página de leitura */
  --nf-measure-prose: 72ch;   /* a coluna de texto corrido dentro dela */
  /* Apelidos que as folhas de hoje usam. */
  --nf-content-max: 1900px;
  --nf-content-max-wide: var(--nf-measure-wide);

  /* ---------- Raio ----------
     Quatro degraus. Ninguém enxerga a diferença entre 9 e 10; o que se
     enxerga é que dois cartões vizinhos não combinam. */
  --nf-radius-xs: 6px;   /* selo, marcador, caixa de ícone pequena */
  --nf-radius-sm: 10px;  /* controle: botão, campo, seleção */
  --nf-radius: 14px;     /* cartão e bloco */
  --nf-radius-lg: 18px;  /* painel e modal */
  --nf-radius-pill: 999px;

  /* ---------- Elevação ----------
     Em tema escuro sombra grande e difusa quase não faz efeito: não há
     luminância embaixo para escurecer. Quem separa as camadas é a ESCADA
     DE BRILHO das superfícies; a sombra só confirma o que flutua de
     verdade. O cartão não tem sombra: ele não flutua, é um degrau.

     sm      — controle pressionado, selo
     (base)  — menu suspenso, cabeçalho fixo
     lg      — modal, painel lateral
     raised  — o que flutua SOBRE conteúdo denso e precisa se destacar
               dele: dica de gráfico, cartão sendo arrastado
     inset   — poço: o fundo afundado de um medidor
     sidebar — a sombra que a barra lateral projeta sobre o conteúdo */
  --nf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .20);
  --nf-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  --nf-shadow-lg: 0 14px 30px rgba(0, 0, 0, .30);
  --nf-shadow-raised: 0 12px 28px rgba(0, 0, 0, .45);
  --nf-shadow-inset: inset 0 0 25px rgba(0, 0, 0, .30);
  --nf-shadow-sidebar: 18px 0 48px rgba(0, 0, 0, .14);

  /* Véus pretos: o fundo do menu móvel aberto, o poço do gráfico da faixa
     final e o contorno de tinta que deixa o pino do mapa legível tanto
     sobre telhado claro quanto sobre mata fechada. */
  --nf-veu: rgba(0, 0, 0, .62);
  --nf-poco: rgba(0, 0, 0, .22);
  --nf-tinta: rgba(0, 0, 0, .55);

  /* Altura de controle: um número para o padrão e um para o compacto. */
  --nf-control-h: 40px;
  --nf-control-h-sm: 32px;

  /* Transição única. Movimento aqui é confirmação de que o clique foi
     recebido — não é animação. */
  --nf-transition: 140ms ease;
}

/* ---------- Pontos de quebra ----------
   Não são tokens (media query não lê variável de CSS), mas ficam escritos
   aqui porque são decisão de sistema. Seis, e o motivo de cada um:

     1600px — ultrawide e TV de NOC: a visão geral cabe em quatro colunas.
     1440px — monitor comum e notebook grande: visão geral e fileira de
              KPIs caem para três colunas AO MESMO TEMPO.
     1280px — o menu lateral deixa de caber junto com duas colunas.
     1024px — tablet deitado: as grades de 3 e 4 colunas viram 2.
      768px — tablet em pé: tudo vira coluna única, a tabela rola sozinha.
      480px — celular: os controles ocupam a linha inteira. */


/* =====================================================================
   3. DERIVADOS E PAPÉIS — declarados para CADA tema, não só para :root

   Custom property com var() dentro é substituída no elemento em que foi
   declarada, e o descendente herda o resultado JÁ RESOLVIDO: com
   --derivado: var(--base) no :root, sobrescrever --base num filho NÃO
   muda --derivado. Por isso tudo que deriva de outro token mora aqui,
   numa lista de seletores: cada tema recalcula a partir da SUA base.
   ===================================================================== */
:root {
  /* Contornos: tinta clara, opacidade fixa. */
  --nf-border: rgba(var(--nf-line-rgb), .13);
  --nf-border-strong: rgba(var(--nf-line-rgb), .22);
  --nf-hairline: rgba(var(--nf-line-rgb), .08);

  /* Trio de cada cor: tinta (o token puro), preenchimento e contorno.
     Sem o trio, cada badge recalculava o seu por conta — foi assim que a
     marca chegou a ter 40 opacidades diferentes. */
  --nf-brand-soft: rgba(var(--nf-brand-rgb), .12);
  --nf-brand-line: rgba(var(--nf-brand-rgb), .26);
  --nf-green-soft: rgba(var(--nf-green-rgb), .12);
  --nf-green-line: rgba(var(--nf-green-rgb), .26);
  --nf-blue-soft: rgba(var(--nf-blue-rgb), .12);
  --nf-blue-line: rgba(var(--nf-blue-rgb), .26);
  --nf-yellow-soft: rgba(var(--nf-yellow-rgb), .12);
  --nf-yellow-line: rgba(var(--nf-yellow-rgb), .26);
  --nf-red-soft: rgba(var(--nf-red-rgb), .12);
  --nf-red-line: rgba(var(--nf-red-rgb), .26);
  --nf-purple-soft: rgba(var(--nf-purple-rgb), .12);
  --nf-purple-line: rgba(var(--nf-purple-rgb), .26);
  --nf-cat-1-soft: rgba(126, 178, 223, .14);
  --nf-cat-2-soft: rgba(127, 189, 150, .14);
  --nf-cat-3-soft: rgba(var(--nf-cat-3-rgb), .14);
  --nf-cat-4-soft: rgba(var(--nf-cat-4-rgb), .14);
  --nf-cat-5-soft: rgba(180, 160, 219, .14);
  --nf-cat-6-soft: rgba(101, 189, 189, .14);
  --nf-cat-7-soft: rgba(var(--nf-cat-7-rgb), .14);

  /* Véus da marca e anel de foco: a opacidade vem do tema. Quatro degraus
     — fundo de linha, fundo de estado, contorno e realce — e é o bastante. */
  --nf-brand-wash: rgba(var(--nf-brand-rgb), var(--nf-brand-wash-a));
  --nf-brand-tint: rgba(var(--nf-brand-rgb), var(--nf-brand-tint-a));
  --nf-brand-edge: rgba(var(--nf-brand-rgb), .26);
  --nf-brand-glow: rgba(var(--nf-brand-rgb), .5);
  /* Foco é acessibilidade, não estilo: um anel só, sempre o mesmo, na cor
     da marca — que por ser laranja não se confunde com nenhum estado. */
  --nf-focus: 0 0 0 3px rgba(var(--nf-brand-rgb), var(--nf-focus-a));

  /* Chão da página: um degradê quieto da marca e um da informação sobre o
     fundo. Dois elementos o pintam — o body, e a área de conteúdo da
     Dashboard com a cor primária dela. */
  --nf-ambient:
    radial-gradient(circle at 20% -10%, var(--nf-brand-tint), transparent 28rem),
    radial-gradient(circle at 100% 0%, rgba(var(--nf-blue-rgb), .045), transparent 24rem),
    var(--nf-bg);

  /* ---------- Papéis semânticos ----------
     Os nomes acima dizem QUE COR é (verde, azul); estes dizem PARA QUE ela
     serve, e são os nomes que componente novo usa. São apelidos dos
     degraus calibrados acima — não há cor inventada aqui. */
  --nf-background: var(--nf-bg);
  --nf-surface-elevated: var(--nf-surface-2);
  --nf-foreground: var(--nf-text);
  --nf-foreground-soft: var(--nf-text-soft);
  --nf-foreground-muted: var(--nf-muted);
  --nf-foreground-faint: var(--nf-faint);

  --nf-primary: var(--nf-brand);
  --nf-primary-hover: var(--nf-brand-strong);
  --nf-primary-active: var(--nf-brand-dim);
  --nf-primary-soft: var(--nf-brand-soft);
  --nf-primary-line: var(--nf-brand-line);
  --nf-on-primary: var(--nf-on-brand);

  --nf-success: var(--nf-green);
  --nf-success-soft: var(--nf-green-soft);
  --nf-success-line: var(--nf-green-line);
  --nf-warning: var(--nf-yellow);
  --nf-warning-soft: var(--nf-yellow-soft);
  --nf-warning-line: var(--nf-yellow-line);
  --nf-danger: var(--nf-red);
  --nf-danger-soft: var(--nf-red-soft);
  --nf-danger-line: var(--nf-red-line);
  --nf-info: var(--nf-blue);
  --nf-info-soft: var(--nf-blue-soft);
  --nf-info-line: var(--nf-blue-line);

  /* Interação: hover e active são véus neutros (valem para linha de
     tabela, item de menu e botão fantasma). */
  --nf-hover: var(--nf-wash);
  --nf-active: var(--nf-wash-strong);

  /* ---------- Apelidos legados ----------
     Nomes que as folhas de hoje usam. Apontam para os papéis acima e vão
     saindo conforme cada tela é revisada; nenhum componente novo os usa. */
  --nf-surface-raised: var(--nf-surface-elevated);
  --nf-color-background: var(--nf-background);
  --nf-color-surface: var(--nf-surface);
  --nf-color-surface-raised: var(--nf-surface-elevated);
  --nf-color-surface-sunken: var(--nf-surface-sunken);
  --nf-color-foreground: var(--nf-foreground);
  --nf-color-foreground-soft: var(--nf-foreground-soft);
  --nf-color-muted: var(--nf-foreground-muted);
  --nf-color-border: var(--nf-border);
  --nf-color-border-strong: var(--nf-border-strong);
  --nf-color-primary: var(--nf-primary);
  --nf-color-primary-fill: var(--nf-primary-active);
  --nf-color-primary-hover: var(--nf-primary-hover);
  --nf-color-primary-active: var(--nf-primary-active);
  --nf-color-on-primary: var(--nf-on-primary);
  --nf-color-accent: var(--nf-primary-hover);
  --nf-color-accent-soft: var(--nf-brand-tint);
  --nf-color-accent-line: var(--nf-brand-edge);
  --nf-color-hover: var(--nf-hover);
  --nf-color-active: var(--nf-active);
  --nf-color-focus: var(--nf-primary);
  --nf-color-focus-ring: var(--nf-focus);
  --nf-color-success: var(--nf-success);
  --nf-color-success-soft: var(--nf-success-soft);
  --nf-color-success-line: var(--nf-success-line);
  --nf-color-warning: var(--nf-warning);
  --nf-color-warning-soft: var(--nf-warning-soft);
  --nf-color-warning-line: var(--nf-warning-line);
  --nf-color-danger: var(--nf-danger);
  --nf-color-danger-soft: var(--nf-danger-soft);
  --nf-color-danger-line: var(--nf-danger-line);
  --nf-color-info: var(--nf-info);
  --nf-color-info-soft: var(--nf-info-soft);
  --nf-color-info-line: var(--nf-info-line);
}


/* =====================================================================
   4. A PALETA EM OKLCH — a camada canônica

   Mesmos valores do bloco 2, na notação em que foram calibrados. O
   navegador que entende a sintaxe relativa recebe os véus, contornos e
   anéis DERIVADOS da cor de origem; os canais RGB deixam de participar.
   O teste confere, canal a canal, que cada oklch() aqui é a mesma cor do
   hexadecimal correspondente acima.
   ===================================================================== */
@supports (color: oklch(from red l c h)) {
  :root {
    --nf-bg: oklch(0.189 0.037 264.1);
    --nf-bg-soft: oklch(0.207 0.036 266.3);
    --nf-surface: oklch(0.231 0.032 262.5);
    --nf-surface-2: oklch(0.260 0.028 263.9);
    --nf-surface-3: oklch(0.293 0.024 264.1);
    --nf-surface-sunken: oklch(0.211 0.034 265.6);

    --nf-text: oklch(0.897 0.010 267.4);
    --nf-text-soft: oklch(0.794 0.010 258.3);
    --nf-muted: oklch(0.701 0.010 258.3);
    --nf-faint: oklch(0.665 0.011 267.0);
    --nf-line: oklch(0.780 0.046 263.0);

    --nf-brand: oklch(0.715 0.175 42.2);
    --nf-brand-strong: oklch(0.781 0.137 45.6);
    --nf-brand-dim: oklch(0.650 0.150 41.2);
    --nf-brand-chrome: oklch(0.714 0.135 42.1);
    --nf-on-brand: oklch(0.175 0.029 44.2);

    --nf-green: oklch(0.730 0.150 156.1);
    --nf-blue: oklch(0.725 0.105 245.1);
    --nf-yellow: oklch(0.784 0.125 95.6);
    --nf-red: oklch(0.705 0.155 3.9);
    --nf-purple: oklch(0.725 0.104 300.0);

    --nf-cat-1: oklch(0.744 0.085 245.4);
    --nf-cat-2: oklch(0.745 0.085 156.1);
    --nf-cat-3: oklch(0.746 0.085 96.6);
    --nf-cat-4: oklch(0.745 0.085 4.1);
    --nf-cat-5: oklch(0.744 0.086 299.9);
    --nf-cat-6: oklch(0.744 0.085 195.5);
    --nf-cat-7: oklch(0.701 0.009 73.7);

    --nf-wash: oklch(1 0 0 / .025);
    --nf-wash-strong: oklch(1 0 0 / .05);

    --nf-paper: oklch(1 0 0);
    --nf-paper-desk: oklch(0.944 0.006 239.8);
    --nf-paper-ink: oklch(0.170 0.013 248.6);
    --nf-paper-ink-soft: oklch(0.402 0.025 244.0);
    --nf-paper-muted: oklch(0.633 0.021 240.9);
    --nf-paper-head-soft: oklch(0.852 0.013 236.7);
    --nf-paper-line: oklch(0.903 0.010 238.5);
    --nf-paper-line-soft: oklch(0.959 0.006 239.8);
    --nf-paper-zebra: oklch(0.978 0.003 247.9);
    --nf-paper-brand: oklch(0.550 0.145 46.1);
    --nf-paper-brand-dark: oklch(0.451 0.140 40.6);
    --nf-paper-brand-tint: oklch(0.960 0.021 60.7);
    --nf-paper-on-brand: oklch(0.162 0.025 160.8);
    --nf-paper-success: oklch(0.610 0.151 152.5);
    --nf-paper-success-dark: oklch(0.498 0.125 152.1);
    --nf-paper-success-tint: oklch(0.968 0.021 161.5);
    --nf-paper-info: oklch(0.592 0.154 253.5);
    --nf-paper-info-tint: oklch(0.955 0.018 253.3);
    --nf-paper-warning: oklch(0.674 0.140 78.8);
    --nf-paper-warning-tint: oklch(0.973 0.035 91.1);
    --nf-paper-danger: oklch(0.586 0.192 20.0);
    --nf-paper-danger-tint: oklch(0.953 0.021 10.2);
    --nf-paper-category: oklch(0.569 0.180 291.8);

    --nf-shadow-sm: 0 1px 2px oklch(0 0 0 / .20);
    --nf-shadow: 0 4px 12px oklch(0 0 0 / .18);
    --nf-shadow-lg: 0 14px 30px oklch(0 0 0 / .30);
    --nf-shadow-raised: 0 12px 28px oklch(0 0 0 / .45);
    --nf-shadow-inset: inset 0 0 25px oklch(0 0 0 / .30);
    --nf-shadow-sidebar: 18px 0 48px oklch(0 0 0 / .14);
    --nf-veu: oklch(0 0 0 / .62);
    --nf-poco: oklch(0 0 0 / .22);
    --nf-tinta: oklch(0 0 0 / .55);
  }

  :root {
    /* Contornos: a tinta de contorno, em três opacidades. */
    --nf-border: oklch(from var(--nf-line) l c h / .13);
    --nf-border-strong: oklch(from var(--nf-line) l c h / .22);
    --nf-hairline: oklch(from var(--nf-line) l c h / .08);

    --nf-brand-soft: oklch(from var(--nf-brand) l c h / .12);
    --nf-brand-line: oklch(from var(--nf-brand) l c h / .26);
    --nf-green-soft: oklch(from var(--nf-green) l c h / .12);
    --nf-green-line: oklch(from var(--nf-green) l c h / .26);
    --nf-blue-soft: oklch(from var(--nf-blue) l c h / .12);
    --nf-blue-line: oklch(from var(--nf-blue) l c h / .26);
    --nf-yellow-soft: oklch(from var(--nf-yellow) l c h / .12);
    --nf-yellow-line: oklch(from var(--nf-yellow) l c h / .26);
    --nf-red-soft: oklch(from var(--nf-red) l c h / .12);
    --nf-red-line: oklch(from var(--nf-red) l c h / .26);
    --nf-purple-soft: oklch(from var(--nf-purple) l c h / .12);
    --nf-purple-line: oklch(from var(--nf-purple) l c h / .26);
    --nf-cat-1-soft: oklch(from var(--nf-cat-1) l c h / .14);
    --nf-cat-2-soft: oklch(from var(--nf-cat-2) l c h / .14);
    --nf-cat-3-soft: oklch(from var(--nf-cat-3) l c h / .14);
    --nf-cat-4-soft: oklch(from var(--nf-cat-4) l c h / .14);
    --nf-cat-5-soft: oklch(from var(--nf-cat-5) l c h / .14);
    --nf-cat-6-soft: oklch(from var(--nf-cat-6) l c h / .14);
    --nf-cat-7-soft: oklch(from var(--nf-cat-7) l c h / .14);

    --nf-brand-wash: oklch(from var(--nf-brand) l c h / var(--nf-brand-wash-a));
    --nf-brand-tint: oklch(from var(--nf-brand) l c h / var(--nf-brand-tint-a));
    --nf-brand-edge: oklch(from var(--nf-brand) l c h / .26);
    --nf-brand-glow: oklch(from var(--nf-brand) l c h / .5);
    --nf-focus: 0 0 0 3px oklch(from var(--nf-brand) l c h / var(--nf-focus-a));

    --nf-ambient:
      radial-gradient(circle at 20% -10%, var(--nf-brand-tint), transparent 28rem),
      radial-gradient(circle at 100% 0%, oklch(from var(--nf-blue) l c h / .045), transparent 24rem),
      var(--nf-bg);
  }

}