/* Reescrito em 22/09/2026 contra o kit de marca da Steel Mountain Marketing, sobre quatro
   decisões dele tomadas no mesmo dia. O DESIGN.md na raiz é a fonte da verdade; este arquivo é
   o gêmeo em CSS e um teste reprova se os dois divergirem.

   A COR PASSA A TER DUAS CATEGORIAS, e elas não se misturam:
   - as QUATRO CORES DE MARCA, que vêm do kit;
   - as CORES DE SISTEMA, que o kit não traz e sem as quais o produto não funciona.
   Palavra dele, 22/09, respondendo à proposta: "2 - sua recomendação".

   Nada foi apagado (regra 16): o que saiu de uso está no bloco HISTÓRICO, no fim. */
:root{
  /* ---------------------------------------------------------------- MARCA (do kit) */
  --ink:#11131C;             /* o preto da marca: título, chapa do menu, theme-color. 16,64:1 na página */
  --soapstone:#F1F3F4;       /* o branco da marca: a página, e a marca sobre fundo escuro */
  --teal:#1294A2;            /* o acento de que as pessoas lembram. Contorno, borda de chip, traço de ícone.
                                NUNCA atrás de texto: 3,26:1 na página, 3,63:1 sob texto branco */
  --change:#FF3B24;          /* o Red do kit. Marca A ÚNICA COISA A MUDAR, e só como número grande
                                (23px+). Nunca botão, nunca frase, nunca rótulo de 10,5px.
                                É instrução, não erro — erro é --red, lá embaixo */

  --ink-gradient-end:#111E2C; /* NOVO em 24/09/2026. A ponta longe do gradiente Ink do kit; a ponta
                                perto é o --ink. Palavra do manual revisado, p.6, em maiúsculas:
                                "ANY TYPE, ANGLE, AND DIRECTION" — o ângulo NÃO é fixo. O contrato
                                dizia "vertical", que era medida tirada do arquivo do ícone e nunca
                                regra do kit. 16,86:1 sob branco */

  /* Escada de teal, do kit. Quem carrega texto é o --teal-700, não o --teal. */
  --deep-teal:#005763;       /* 7,42:1 na página, 8,26:1 sob branco */
  --teal-700:#05747F;        /* 4,95:1 na página, 5,51:1 sob branco — o único que pode ficar atrás de texto */
  --teal-600:#008696;        /* degrau novo: o contrato não tinha nada aqui */
  --teal-300:#69AFB8;        /* linha e borda. Nunca texto: 2,24:1 */
  --teal-50:#E0EDEF;         /* hover de linha e seleção */

  /* Neutros, do kit. Quatro dos cinco são escuros, porque o kit foi desenhado para interface
     escura. No tema claro só o --steel e o --hairline entram; os outros esperam. */
  --surface-dark:#1B1E27;    /* o kit chama de Surface. Só tema escuro */
  --graphite:#2B2F3A;
  --steel:#5D6371;           /* texto secundário. 5,41:1 na página — passa. No escuro NÃO passa (2,77:1) */
  --aluminum:#B4B9C2;        /* 1,77:1 na página: decoração e desabilitado APENAS.
                                No escuro é ele o muted (8,45:1) */
  --hairline:#D6DAE0;        /* o fio de cabelo. Os três que o contrato tinha viram este */

  /* ---------------------------------------------------------------- SEMÂNTICO
     Os nomes que a biblioteca e o app já usam. Mudou o valor, não o nome — é o que permite
     repintar sem reescrever 43 chamadas. */
  --teal-d:#05747F;          /* = --teal-700. Preenchimento primário, link, anel de foco.
                                Era #137789. O botão antigo usava #1E94A8 com texto branco e
                                media 3,59:1: já reprovava, antes de qualquer kit */
  --teal-wash:#E0EDEF;       /* = --teal-50 */
  --teal-line:#69AFB8;       /* = --teal-300 */
  --tl:#69AFB8;              /* linha teal clara / seta de voltar */

  --text:#1B1E27;
  --muted:#5D6371;           /* = --steel */
  --muted-d:#5D6371;         /* o kit tem UM muted; o nome sobrevive (regra 16), o valor é o mesmo */
  --muted-on-white:#5D6371;  /* idem */
  --faint:#B4B9C2;           /* = --aluminum. DECORAÇÃO E TEXTO DESABILITADO APENAS.
                                Nunca frase, nunca rótulo, nunca eixo: use --muted */

  --bg:#F1F3F4;              /* = --soapstone, a página */
  --surface:#FFFFFF;         /* DERIVADO: o kit dá a página e nunca declara o cartão.
                                Branco, porque o cartão precisa se separar da página.
                                Leitura da sessão DESIGN, não decisão dele */
  --surface-2:#F1F3F4;       /* a superfície afundada é a cor da página, sob um cartão branco */
  /* OS DOIS VEUS, 24/09/2026, palavra dele: "as quatro entram". Barra que flutua sobre o
     conteudo nao e' superficie: o conteudo tem de continuar legivel ATRAVES dela e ela legivel
     por cima. Sao o --surface com alfa, entao o veu segue o cartao e nada foi inventado. O nome
     diz a barra a que pertence, porque valor de alfa sem papel vira numero solto. */
  --veil-bar:rgba(255,255,255,.92);    /* barra fixa de acao, no rodape da tela */
  --veil-topbar:rgba(255,255,255,.88); /* barra de topo grudada. Mais leve: passa mais coisa por baixo */

  --border:#D6DAE0;          /* = --hairline */
  --border-2:#D6DAE0;        /* nome mantido (regra 16); mesmo valor agora */
  --border-3:#D6DAE0;        /* nome mantido (regra 16); mesmo valor agora */

  --navy:var(--ink);         /* ALIAS HISTÓRICO. O azul-marinho morreu no kit de 22/09 e o lugar
                                dele é o Ink. O nome sobrevive porque 12 chamadas o usam; o valor
                                antigo está em --was-navy. Não escrever --navy em código novo */

  /* ---------------------------------------------------------------- SISTEMA (NÃO é marca)
     O kit declara quatro cores e não traz verde, âmbar nem vermelho de erro. Um painel que
     precisa dizer validado, em fila, em treino e falhou na mesma tabela não se constrói com
     quatro cores. Estas vivem aqui, em categoria própria, e nunca se chamam cor de marca. */
  --good:#16A34A; --good-btn:#15803D; --good-text:#15803D; --good-bg:#ECFDF5; --good-line:#9AE6B4;
  --warn:#B45309; --warn-text:#92400E; --warn-bg:#FEF6E7; --warn-line:#F5D9A6;
  --red:#B91C1C;  --red-hover:#991B1B; --red-bg:#FEF2F2;  --red-line:#FCA5A5;
  /* ERRO É ESTE VERMELHO, não o --change do kit. Os dois nunca se encontram numa tela: um vive
     no resultado da análise e o outro em formulário e painel. Isto inverte a regra que valia
     aqui até 22/09 ("never an error colour"), e a inversão é decisão dele: "3 - aceitar o kit" */
  --info:#155E75; --info-bg:#ECFEFF;  --info-line:#67E8F9;
  --pub:#3730A3;  --pub-bg:#EEF2FF;   --pub-line:#A5B4FC;
  --repl:#05747F; --repl-bg:#E0EDEF;  --repl-line:#69AFB8;
  --train-bg:#FFF7ED; --train-line:#FDBA74;

  /* Menu: a chapa deixa de ser navy e passa a ser Ink */
  --menu-bg:#11131C;
  --menu-text:#F1F3F4;
  --menu-group:#9FB4C8;
  --menu-soon:#8CA3B8;

  /* Série de gráfico */
  --chart-1:#1294A2; --chart-2:#11131C; --chart-3:#16A34A; --chart-4:#B45309; --chart-5:#3730A3;
  --chart-grid:#D6DAE0; --chart-axis:#5D6371;

  /* GÁS E TIPO DE PASSO. Entraram em 24/09/2026 com a palavra dele: "sim, confirma as cores e a
     profundidade". São CORES DE SISTEMA, na categoria que o kit não traz, e nunca se chamam cor
     de marca.
     OS HEX QUE ELE VIU PRIMEIRO NÃO SÃO ESTES. A pergunta que ele respondeu "declaradas" trazia
     N₂ #2563EB e ar #16A34A; medidos no fundo do próprio chip dão 4,14:1 e 3,13:1 e os dois
     REPROVAM na régua de 4,5:1. A rodada de desenho devolveu os dois um degrau mais escuros, e ele
     confirmou com a leitura ao lado. O O₂ já passava e não se mexeu.
     O chip é a cor sobre o -bg dela. Os nomes -soft existem porque os scripts do app já pedem por
     eles: mesmo valor, nome que o código usa (regra 16). */
  /* OS DOIS LADOS DA CONVENCAO DE FOCO (25/09/2026, palavra dele: "Viram oficiais, mesmo tom
     de hoje"). NAO SAO COR DE GAS e nunca se reusam como tal -- o azul e' vizinho do gas-n2 e o
     vermelho do gas-o2, e emprestar qualquer um colaria um gas num conceito de foco.
     E a cor NAO e' o sinal: os dois passam 9:1 contra todo fundo, mas ENTRE SI medem 1,03:1
     (mesma luminosidade, so' matiz). A seta (para cima / para baixo) e' que carrega o sentido;
     a cor reforca. Nenhum dos dois lados se diz por cor sozinha. */
  --focus-above:#1E3A8A;
  --focus-below:#7F1D1D;
  --gas-o2:#C00000;   --gas-o2-bg:#FCE8E8;   /* 5,51:1 */
  --gas-n2:#1D4ED8;   --gas-n2-bg:#DCE7F8;   /* 5,37:1 · era #2563EB, 4,14:1 */
  --gas-air:#15803D;  --gas-air-bg:#ECFDF5;  /* 4,76:1 · = --good-text sobre --good-bg. Era #16A34A, 3,13:1 */
  --gas-none:#5D6371; --gas-none-bg:#F1F3F4; /* 5,41:1 · = --steel sobre a página: "qualquer gás" */
  --gas-o2-soft:var(--gas-o2-bg); --gas-n2-soft:var(--gas-n2-bg);
  --gas-air-soft:var(--gas-air-bg); --gas-none-soft:var(--gas-none-bg);

  /* Tipo do passo numa lista de correção: que espécie de ação ele pede. */
  --action-software:#1D4ED8;    --action-software-soft:#EFF4FD;    /* 6,07:1 · = --gas-n2 */
  --action-parameter:#92400E;   --action-parameter-soft:#FEF3D9;   /* 6,43:1 · = --warn-text.
     Era #D97706, corrigido na mesma passada e pelo mesmo motivo. O fundo é um fio mais quente que
     o --warn-bg #FEF6E7, que mede 6,60:1 com a mesma tinta: são dois âmbares, e juntar os dois é
     decisão de outra hora. Nada foi apagado para poder perguntar (regra 16). */
  --action-maintenance:#15803D; --action-maintenance-soft:#ECFDF5; /* = --good-text sobre --good-bg */

  /* ---------------------------------------------------------------- HISTÓRICO (regra 16)
     Guardado para nada se perder e para ninguém reintroduzir por engano.
     FORA DE USO desde 22/09/2026. Nenhum destes tem chamada na biblioteca. */
  --was-primary:#137789;     /* o primário antigo */
  --was-teal:#1E94A8;        /* o acento antigo. Sob texto branco media 3,59:1 e já reprovava */
  --was-navy:#0F2A4A;        /* a chapa do menu e o theme-color antigos */
  --was-ink:#111619;
  --was-mark-teal:#2495B0;   /* a marca antiga se desenhava em seis cores próprias */
  --was-mark-ris:#12294D;
  --was-mark-tagline:#157F96;
  --was-laser-red:#FF2B1C;   /* o estado de trabalho da marca antiga, proibido como cor de UI */
}
/* The app has 59 distinct padding values and no scale. This is the scale it actually
   gravitates to, plus the control paddings copied verbatim from the code. */
:root{
  --sp-0:0;   /* @kind spacing */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px;
  --sp-6:14px; --sp-7:16px; --sp-8:18px; --sp-9:20px; --sp-10:22px;
  --sp-11:24px; --sp-12:32px; --sp-13:48px; --sp-14:64px;

  /* Control paddings as written in the code */
  --pad-btn:10px 16px;      /* button, admin.html:38 */
  --pad-btn-lg:11px 18px;   /* button on the log pages */
  --pad-hbtn:7px 13px;      /* .hbtn */
  --pad-input:9px 11px;     /* input, admin.html:36 */
  --pad-cell:8px 10px;      /* table cell */
  --pad-chip:5px 9px;       /* .chip */
  --pad-card:22px;          /* .card in admin; 20px on the log pages */
  --pad-header:11px 20px;   /* header */

  /* Shell geometry */
  --sidebar-w:230px;        /* painel.html:14 */
  --sidebar-w-sm:64px;
  --wrap-max:1000px;        /* .wrap in admin, diag_log, audit_log */
  --wrap-max-narrow:960px;  /* learn_review */
  --header-h:56px;
  --topbar-h:48px;          /* painel .topo */
  --area-pad:20px;          /* painel .area */
  --row-h:44px;
  --ctl-h:44px;             /* every touch target, per the accessibility decision */
  --col-value-min:108px;    /* piso da coluna de valor na tabela larga; ver DESIGN.md, Components */
  --num-badge-d:28px;       /* diametro do numero da secao; o recuo do subtitulo deriva dele por
                               calc(--num-badge-d + --sp-5) e vai em padding, nunca em margin.
                               Ver DESIGN.md, Components */
  --heading-sub-gap:2px;    /* costura entre a linha do titulo e a do subtitulo, DENTRO do mesmo
                               cabecalho. Abaixo da escala de proposito: o leading ja' separa, e
                               este e' o ajuste optico em cima dele. Ver DESIGN.md, Components */
  --ctl-h-sm:36px;          /* dense desktop toolbars only */
  --tabbar-h:60px;          /* mobile bottom bar */

  /* A folga que uma barra fixa tira do conteudo embaixo dela. 24/09/2026, palavra dele:
     "as quatro entram". E' DERIVADA e nao degrau da escala: 44 de controle + 12 em cima + 24
     embaixo da 80, e o resto e' o respiro que impede a ultima linha de encostar na barra. Mora
     aqui para dez telas lerem um valor em vez de cada uma escrever o seu. */
  --fixed-bar-clear:112px;

  /* A geometria da marca. NOVO em 24/09/2026, manual revisado p.5 ("Some rules to follow").
     Antes dessa página o contrato não tinha nada aqui, e dizia isso. */
  --logo-min:16px;          /* "The minimum size of the logo is 16x16 px" */
  --logo-clear-mobile:16px; /* "Start with at least 16px on all sides on mobile" */
  --logo-clear-desktop:24px;/* "Increase to 24px on all sides" em tablet e desktop */
  /* O LOCKUP NA BARRA DE TOPO (25/09/2026, palavra dele: "um pouquinho menor do que hoje").
     A medida NAO variava -- 99x28 nas dezenove telas que o trazem, a 320 e a 390 -- e estava
     cravada duas vezes no airis-app.css, sem token nenhum por tras. Estes quatro sao aquele
     numero um degrau abaixo, com a proporcao 99:28 do lockup horizontal do kit exata nos dois
     pares. O celular fica em 24px, acima do --logo-min de 16px. */
  --bar-lockup-h:24px;
  --bar-lockup-w:85px;
  --bar-lockup-h-desktop:28px;
  --bar-lockup-w-desktop:99px;
  --logo-clear-large:32px;  /* pôster e pull-up: "at least 32px". A regra acima dos números:
                               o respiro cresce junto com o tamanho */
}
/* Kept from the app: 9px controls, 14px cards, 8px header buttons, pill chips. */
:root{
  --r-0:0;      /* @kind radius */
  --r-chip:999px;
  --r-chip-sq:7px;   /* admin's square chip */
  --r-sm:6px;
  --r-hbtn:8px;
  --r-ctl:9px;       /* button, input, select */
  --r-panel:12px;
  --r-card:14px;
  /* DOIS DEGRAUS NOVOS em 24/09/2026, com a palavra dele: "entram". As telas v2 arredondam
     o cartao de linha mais que um painel, e o cartao-heroi mais que os dois, e a lista parava
     em 14. Dar nome e' o que impede 16 e 20 de virarem numero solto em dez telas. */
  --r-card-lg:16px;  /* cartao de linha numa lista */
  --r-hero:20px;     /* o unico cartao que carrega a acao principal da tela */
  --r-circle:50%;
  --border-w:1px; --border-w-thick:1.5px; --focus-w:3px; --focus-offset:1px;
}
/* Reescrito em 22/09/2026 contra o kit novo: o peso 800 SAI (o kit para no Bold 700),
   h2/h3/h4 caem para SemiBold 600 e o papel de marca em Poppins morre.
   Sizes are the ones actually in the code. The app has 20 different font-size values;
   this keeps the nine that carry real use and drops the rest. */
:root{
  --fs-10-5:10.5px; --fs-11:11px; --fs-11-5:11.5px; --fs-12:12px; --fs-12-5:12.5px;
  --fs-13:13px; --fs-13-5:13.5px; --fs-14:14px; --fs-15:15px; --fs-16:16px;
  --fs-17:17px; --fs-18:18px; --fs-20:20px; --fs-22:22px; --fs-23:23px; --fs-24:24px;
  --fs-26:26px; --fs-40:40px;

  --fw-regular:400; /* @kind font */
  --fw-medium:500;  /* @kind font */
  --fw-semibold:600;/* @kind font */
  --fw-bold:700;    /* @kind font */
  --fw-black:800;   /* @kind font */ /* FORA DE USO desde 22/09/2026: o kit para no Bold 700.
                       O nome fica (regra 16); nenhum papel o chama */

  --lh-tight:1.2;   /* @kind font */
  --lh-snug:1.35;   /* @kind font */
  --lh-body:1.5; /* @kind font */
  --lh-loose:1.55;  /* @kind font */

  --ls-h1:-.015em; /* @kind font */
  --ls-label:.08em; /* @kind font */
  --ls-chip:.06em;  /* @kind font */
  --ls-wide:.16em;  /* @kind font */

  /* Roles */
  --type-h1:var(--fw-bold) var(--fs-24)/var(--lh-tight) var(--font-ui);       /* @kind font */
  --type-h2:var(--fw-semibold) var(--fs-18)/var(--lh-snug) var(--font-ui);        /* @kind font */
  --type-h3:var(--fw-semibold) var(--fs-16)/var(--lh-snug) var(--font-ui);         /* @kind font */
  --type-h4:var(--fw-semibold) var(--fs-14)/var(--lh-snug) var(--font-ui);         /* @kind font */
  --type-body:var(--fw-regular) var(--fs-15)/var(--lh-body) var(--font-ui);    /* @kind font */
  --type-body-sm:var(--fw-regular) var(--fs-13-5)/var(--lh-body) var(--font-ui); /* @kind font */
  --type-cell:var(--fw-regular) var(--fs-13)/var(--lh-snug) var(--font-ui);    /* @kind font */
  --type-meta:var(--fw-regular) var(--fs-12)/var(--lh-snug) var(--font-ui);    /* @kind font */
  --type-label:var(--fw-bold) var(--fs-10-5)/var(--lh-snug) var(--font-ui);   /* @kind font */
  --type-btn:var(--fw-semibold) var(--fs-14)/1 var(--font-ui);                 /* @kind font */
  --type-btn-sm:var(--fw-semibold) var(--fs-12-5)/1 var(--font-ui);            /* @kind font */
  --type-chip:var(--fw-bold) var(--fs-10-5)/1 var(--font-ui);                 /* @kind font */
  --type-num:var(--fw-semibold) var(--fs-23)/var(--lh-tight) var(--font-ui);      /* @kind font */
  /* DOIS PAPEIS NOVOS em 24/09/2026, com a palavra dele: "entram". As telas v2 pediram dois
     degraus que a escala nao tinha. Sao PAPEL e nao tamanho: cada um mora num lugar so', e
     nomear o lugar e' o que impede 17px e 20px de se espalharem como numero solto. */
  --ls-card-title:-.01em; /* @kind font */
  --type-card-title:var(--fw-bold) var(--fs-20)/1.25 var(--font-ui);   /* @kind font */
  --type-lead:var(--fw-semibold) var(--fs-17)/var(--lh-snug) var(--font-ui); /* @kind font */
  /* TRES PAPEIS, 24/09/2026, mesma palavra. Cada um entrou por aparecer no desenho mais de uma
     vez, nao por alguem gostar do numero. */
  --ls-readout-lg:-.02em; /* @kind font */
  --type-readout-lg:var(--fw-semibold) var(--fs-40)/1 var(--font-ui);       /* @kind font */
  --type-record-title:var(--fw-bold) var(--fs-22)/1.25 var(--font-ui);      /* @kind font */
  --type-figure-lg:var(--fw-semibold) var(--fs-22)/var(--lh-tight) var(--font-ui); /* @kind font */
  /* --type-brand saiu em 22/09/2026: o logotipo do kit novo e DESENHADO, nao digitado,
     entao nao ha mais o que compor em fonte. O --font-brand vira alias do --font-ui. */
  --type-brand:var(--fw-bold) var(--fs-16)/1 var(--font-ui);                   /* @kind font */
}
/* Profundidade. REESCRITO em 24/09/2026, com a palavra dele: "sim, confirma as cores e a
   profundidade", depois da rodada de desenho que respondeu ao "o visual esta' pobre e sem
   profundidade". O DESIGN.md, bloco `elevation`, e' a fonte da verdade; um teste reprova se os
   dois lados divergirem.

   DUAS COISAS MUDARAM DE VERDADE, e nao e' so' valor novo:

   1. A TINTA E' INK. Toda sombra daqui era tingida de rgba(19,119,137), que e' o #137789 — o
      PRIMARIO APOSENTADO, a cor que saiu com o kit antigo. Agora a cor sai de UM lugar,
      --shadow-rgb, entao retingir e' trocar um valor e nao varrer o arquivo.
   2. CADA SOMBRA GANHOU UMA CAMADA PERTO. So' a camada longe e macia lia como borrao, nao como
      objeto levantado: e' a camada de 1 a 4px que diz que a coisa esta' apoiada em algo.

   O que NAO mudou: nada aqui carrega texto, entao nenhuma regua de contraste se aplica a sombra
   ou a borda. O que carrega texto continua medido no colors.css e no semantic.css. */
:root{
  --shadow-rgb:17,19,28;      /* = --ink em RGB. A sombra precisa dos canais, nao do hex */

  --shadow-none:none;
  --shadow-card:0 1px 2px rgba(var(--shadow-rgb),.06),0 20px 42px -32px rgba(var(--shadow-rgb),.38);
  --shadow-rec:0 1px 2px rgba(var(--shadow-rgb),.05),0 18px 40px -32px rgba(var(--shadow-rgb),.32);
  --shadow-hover:0 2px 4px rgba(var(--shadow-rgb),.08),0 14px 28px -14px rgba(var(--shadow-rgb),.34);
  --shadow-pop:0 18px 44px rgba(var(--shadow-rgb),.28);
  /* --shadow-modal NAO se declara aqui: ele ja' mora no tokens/components.css, com este
     mesmo valor. Declarar nos dois lugares e' criar divergencia futura de graca. */
  --shadow-toast:0 6px 24px rgba(var(--shadow-rgb),.25);

  /* Anel de foco: solido e teal. O rgba(30,148,168,.14) antigo era invisivel, e o
     rgba(19,119,137) que estava aqui ate' 24/09 era o primario aposentado. */
  --ring-focus:0 0 0 3px rgba(5,116,127,.35);          /* = --teal-700 */
  --ring-focus-inverse:0 0 0 3px rgba(255,255,255,.55);

  /* AS BORDAS, novas em 24/09. A sombra diz a que altura a coisa esta'; a borda diz se ela esta'
     iluminada, apertada ou escavada. Todas inset, todas decorativas. */
  --edge-light:inset 0 1px 0 rgba(241,243,244,.22);    /* = --soapstone: o fio de luz do primario */
  --edge-press:inset 0 2px 4px rgba(0,67,76,.45);      /* = --accent-press: o botao afunda */
  --edge-sunk:inset 0 1px 2px rgba(var(--shadow-rgb),.07); /* campo e trilho escavados no cartao */

  /* AS DUAS SUPERFICIES QUE DEIXAM DE SER CHAPADAS. A pagina continua Soapstone e ganha luz de
     cima; a chapa e' o gradiente Ink DO KIT (p.6 do manual), nao invencao nossa. */
  --page-depth:linear-gradient(180deg,#FFFFFF 0,#F1F3F4 360px);
  --brand-plate:linear-gradient(160deg,#11131C,#111E2C);
  --photo-fill:#2B2F3A;       /* = --graphite: o que ocupa a moldura antes de a foto chegar */

  /* CORRIGIDO em 24/09/2026: estava rgba(15,42,74,.55), que e' o #0F2A4A — o NAVY APOSENTADO.
     O DESIGN.md declara "ink scrim rgba(17,19,28,.55)" desde 22/09; o gemeo em CSS nao tinha
     seguido, e nenhum teste olhava para este arquivo. Agora olha. Nao e' escolha de desenho:
     e' o gemeo passando a obedecer a fonte da verdade. */
  --scrim:rgba(17,19,28,.55);
  --blur-scrim:blur(2px); /* @kind other */
  --z-header:20; /* @kind other */
  --z-pop:250; /* @kind other */
  --z-modal:9999; /* @kind other */
  --z-block:99999; /* @kind other */
}
/* The app's two transition durations, plus the mark's state machine timings. */
:root{
  --dur-fast:140ms; /* @kind other */
  --dur-med:150ms; /* @kind other */
  --dur-close:300ms; /* @kind other */
  --dur-dwell:150ms; /* @kind other */
  --dur-open:420ms; /* @kind other */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-mark:cubic-bezier(.65,0,.35,1); /* @kind other */
  --spin-busy:51.6deg; /* @kind other */
}
/* Aliases components reference. Light is the product theme — decisao dele em 22/09/2026,
   "1- claro" — e dark is built but not switched on anywhere in the app yet.
   O bloco escuro NAO foi remedido contra o kit novo: ver o aviso nele. */
:root{
  --bg-app:var(--bg);
  --bg-canvas:var(--bg);
  --surface-card:var(--surface);
  --surface-raised:var(--surface);
  --surface-sunken:var(--bg);
  --surface-nav:var(--surface);
  --surface-inset:var(--surface-2);
  --surface-hover:var(--teal-wash);
  --surface-selected:var(--teal-wash);
  --surface-code:var(--surface-2);

  --text-heading:var(--ink);
  --text-body:var(--text);
  --text-muted:var(--muted);
  --text-faint:var(--muted); /* --faint may not carry copy; see tokens/colors.css */
  --text-inverse:var(--soapstone);
  --text-accent:var(--teal-d);
  --text-link:var(--teal-d);
  --text-link-hover:var(--deep-teal);

  --border-subtle:var(--border);
  --border-default:var(--border);
  --border-strong:var(--muted);
  --border-accent:var(--teal);
  --divider:var(--border);

  --accent:var(--teal-d);        /* = --teal-700 #05747F: 5,51:1 sob texto branco. O --teal do kit
                                    (#1294A2) daria 3,63:1 e NAO pode ficar atras de texto */
  --accent-hover:#005763;        /* = --deep-teal */
  --accent-press:#00434C;        /* DERIVADO: a escada do kit para no deep-teal e o estado
                                    pressionado precisa ler mais escuro que o hover */
  --accent-quiet:var(--teal-wash);
  --on-accent:var(--soapstone);

  /* DECIDIDO em 24/09/2026: o botao primario e' GRADIENTE, nao preenchimento chapado. Palavra
     dele: "devemos considerar a preferencia do time do marketing, entao a B, porem precisamos
     criar algo melhor pois o visual esta' pobre e sem profundidade". E' a opcao B do teste lado a
     lado em botoes--dneapp. O --accent continua chapado, porque ele e' link, anel de foco e
     estado ativo, e nao o botao.
     A PONTA CLARA E' A QUE TEM DE PASSAR NA REGUA: #05747F da' 5,51:1 sob branco e 4,95:1 sob
     soapstone. Se o gradiente for reafinado, o piso e' 4,5:1 em QUALQUER ponto, nao so' na ponta
     escura. */
  --accent-grad-from:var(--teal-700);
  --accent-grad-to:var(--deep-teal);
  --accent-grad-hover-from:var(--deep-teal);
  --accent-grad-hover-to:#00434C;       /* = --accent-press */
  --accent-grad:linear-gradient(180deg,var(--accent-grad-from),var(--accent-grad-to));
  --accent-grad-hover:linear-gradient(180deg,var(--accent-grad-hover-from),var(--accent-grad-hover-to));
  --readout-change:var(--change); /* o numero da mudanca, 23px+. Nunca botao, nunca frase */

  --status-critical:var(--red);
  --status-high:var(--warn);
  --status-moderate:var(--info);
  --status-low:var(--good-text);
  --status-ok:var(--good-text);
  --status-info:var(--teal-d);
  --status-change:var(--change);  /* a unica coisa a mudar. Instrucao, nao erro */
  --status-offline:var(--muted);

  --shadow-1:var(--shadow-hover);
  --shadow-2:var(--shadow-card);
  --shadow-3:var(--shadow-pop);
  --shadow-4:var(--shadow-pop);
  --r-xs:2px; --r-md:var(--r-hbtn); --r-lg:var(--r-ctl); --r-xl:var(--r-card); --r-pill:var(--r-chip);
}

[data-theme="dark"]{
  /* Alinhado ao kit em 22/09/2026, mas NAO ligado (decisao dele: "1- claro") e NAO remedido
     tela a tela. Uma trava vale desde ja: --steel NUNCA e texto aqui (2,77:1 sobre o Surface);
     o muted do escuro e o --aluminum (8,45:1). */
  --bg-app:var(--ink);
  --bg-canvas:var(--ink);
  --surface-card:var(--surface-dark);
  --surface-raised:var(--graphite);
  --surface-sunken:#0B0D14;
  --surface-nav:var(--ink);
  --surface-inset:rgba(255,255,255,.04);
  --surface-hover:rgba(18,148,162,.16);
  --surface-selected:rgba(18,148,162,.22);
  --surface-code:#0B0D14;

  --text-heading:var(--soapstone);
  --text-body:var(--hairline);
  --text-muted:var(--aluminum);   /* NAO --steel: 2,77:1 reprova */
  --text-faint:var(--steel);      /* so' forma, nunca texto */
  --text-accent:var(--teal);      /* 5,10:1 sobre o Ink: no escuro o teal PODE carregar texto */
  --text-link:var(--teal);
  --text-link-hover:var(--teal-300);

  --border-subtle:rgba(255,255,255,.08);
  --border-default:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.24);
  --divider:rgba(255,255,255,.10);

  --accent:var(--teal);
  --accent-hover:var(--teal-300);
  --accent-press:var(--teal-700);
  --accent-quiet:rgba(18,148,162,.18);
  --on-accent:var(--ink);

  --shadow-2:none;
  --chart-grid:rgba(255,255,255,.10);
  --chart-axis:var(--aluminum);
}
/* Component geometry. Added on 18/09/2026 when the dump's React components were ported to the
   app's stack: the components referred to these names, and tokens/ never defined them
   (--control-h-*, --font-core, --shell-*, --navy-700, --n-300/400, --shadow-modal, --type-mono,
   --fs-32/40). Each one points at an existing token where one exists, so no value drifts.
   New values are marked NEW and come from the component sheet in the dump. */
:root{
  --font-core:var(--font-ui);

  /* Control heights. The accessibility decision is 44px for every touch target; 36px only on
     dense desktop toolbars. The sheet's 28/36/44 became 36/44/44. */
  --control-h-sm:var(--ctl-h-sm);
  --control-h-md:var(--ctl-h);
  --control-h-lg:var(--ctl-h);

  /* Shell */
  --shell-sidebar-w:var(--sidebar-w);
  --shell-sidebar-collapsed-w:var(--sidebar-w-sm);
  --shell-topbar-h:var(--header-h);
  --shell-mobile-tabbar-h:var(--tabbar-h);
  --shell-drawer-w:296px;          /* NEW: Drawer.prompt.md, "296px wide inline" */

  /* Surfaces the sheet named */
  --navy-700:var(--navy);          /* tooltip plate */
  --n-300:var(--faint);            /* switch track when off: shape, never text */
  --n-400:var(--muted);
  --shadow-modal:var(--shadow-pop);

  /* Type the sheet named */
  --fs-32:32px;                    /* NEW: MetricStat md */
  --fs-40:40px;                    /* NEW: MetricStat lg */
  --type-mono:var(--fw-regular) var(--fs-12-5)/var(--lh-snug) var(--font-mono); /* @kind font */

  /* Component-local sizes, read by components.css */
  --ds-select-w:200px;             /* Select default width, from Select.jsx */
  --ds-multi-w:240px;              /* MultiSelect default width */
  --ds-search-w:240px;             /* SearchInput default width */
  --ds-dialog-w:520px;             /* Dialog default width */
  --ds-log-max:200px;              /* LogPanel height before scrolling */
  --ds-popover-max:208px;          /* list height before scrolling */
  --ds-check:16px;                 /* checkbox and radio box */
  --ds-check-lg:20px;
}