/*
 * FingerTrackID landing tokens. Light, and dark when the visitor or their system asks for it:
 * the `:root[data-theme="dark"]` block near the end of this file redefines colors only; type,
 * space, shape and grid are the same in both themes.
 *
 * While SITE-011 is open, any change to this file must ship with the `?v=` of every local
 * CSS/JS references in index.html bumped together (site/README.md, "Janela de cache").
 *
 * Três decisões governam o resto:
 * 1. Índigo é a cor da marca e aparece só onde se clica ou onde algo foi DETECTED.
 * 2. Hierarquia vem de escala tipográfica e tamanho de painel, nunca de cor. A única
 *    exceção é a escala ordinal das medidas (--escala-*): ali a cor É o dado.
 * 3. Forma quase reta: raio 2/4 px, uma única sombra de 1 px. Separação por borda e tom.
 *
 * A paleta do console (apps/console/src/styles/tokens.css) é outra: fria, densa, azul #1c5dd3.
 * As duas só se encontram no ícone, que é o mesmo hex nos dois lugares.
 */

/*
 * SITE-012: the two families come from this origin, not from Google Fonts. The files are the
 * latin subset of the `@fontsource` packages pinned for the console, byte-equal
 * (tools/test/landing-fonts.test.ts), with the same faces the Google request asked for:
 * Instrument Sans variable 400–700 in roman and italic, IBM Plex Mono 400, 500 and 400 italic.
 * The page uses no character outside this unicode-range, so no other subset was ever downloaded.
 * Licenses: assets/fonts/LICENSE-*.txt (SIL OFL 1.1).
 */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("../assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url("../assets/fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
/* Extended subsets for the translated pages (Polish, Turkish, Czech, Vietnamese, Russian,
   Ukrainian…), same @fontsource packages; a browser only downloads a subset whose range the page uses. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("../assets/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url("../assets/fonts/instrument-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range:
    U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../assets/fonts/ibm-plex-mono-vietnamese-400-normal.woff2") format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");
  unicode-range:
    U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../assets/fonts/ibm-plex-mono-vietnamese-500-normal.woff2") format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  color-scheme: light;

  /* Superfícies */
  /* Copied by value in scripts/theme.js (BROWSER_CHROME) and in index.html's theme-color
     meta; --paper-halo and the halo of the three --cursor-* images below are paper-toned too. */
  --paper: #f7f5f0;
  --paper-deep: #efece4;
  --panel: #ffffff;
  --ink-band: #0b0d14;

  /* Tinta */
  --ink-1: #14182b;
  --ink-2: #454b66;
  --ink-3: #5e637d; /* piso de cor para texto, em qualquer tamanho */
  --ink-on-band: #f7f5f0;
  --ink-on-indigo: #ffffff;

  /* Bordas */
  --rule: #e4e1d9; /* hairline decorativa */
  --rule-strong: #7c8391; /* borda funcional: input, glifo, régua (≥ 3:1) */
  --rule-on-band: rgb(247 245 240 / 0.18);

  /* Índigo da marca (mesmo hex do ícone) */
  --indigo: #4338ca;
  --indigo-hover: #3730a3;
  --indigo-active: #312e81;
  --indigo-tint: #ecedfa;
  --indigo-halo: rgb(67 56 202 / 0.3);
  --indigo-core: #a5b4fc; /* texto SÓ sobre --ink-band */
  --nucleus-core: var(--indigo-core); /* the dot inside .nucleo--lg; dark swaps it, see below */

  /* Estados de sinal: presença × ausência × não avaliado. Nunca verde/vermelho. */
  --sig-presente: #2b2f86;
  --sig-glifo: #7c8391;

  /* Extremos da escada de recomendação */
  --sem-cool: #176b5a; /* ALLOW */
  --sem-warm: #a3480f; /* BLOCK_RECOMMENDED */
  --erro: #8f1d1d;

  /* Escala ordinal das medidas — a ÚNICA exceção à regra 1.
     Vale só para medida contínua onde alto é melhor (trust_score, evidence_coverage,
     device_match_confidence). Estado de sinal continua sem verde/vermelho: presença
     não é culpa. Cinco paradas, interpoladas em JS pelo valor exibido no quadro.
     Todas passam 4.5:1 sobre --panel e sobre --paper, e nenhuma repete a tinta da escada de
     recomendação: nota 100 não pode imprimir igual a ALLOW, senão a cor diz "libere". */
  --escala-0: #9d1f26;
  --escala-40: #a8500d;
  --escala-60: #8a6a06;
  --escala-80: #4e6d20;
  --escala-100: #2d6a2f; /* verde de vegetação: longe do teal de ALLOW, de propósito */
  --escala-nula: #5e637d; /* sem score não é nota baixa: é ausência */

  /* Colors that used to be literals in landing.css and have to follow the theme. Written as
     literals per theme, not as color-mix() of other tokens, so that no browser that rendered
     the page before the dark theme loses them (color-mix needs Safari 16.2 / Chrome 111). */
  --scroll-hint: rgb(20 24 43 / 0.08); /* scrollable region edge: --ink-1 at 8 % */
  --wash: rgb(20 24 43 / 0.08); /* hover wash behind the × of a created chip */
  --detected-edge: rgb(43 47 134 / 0.4); /* border of a DETECTED cell */
  --indigo-edge: rgb(67 56 202 / 0.35); /* border of the "your flow decides" column */
  --indigo-pulse: rgb(67 56 202 / 0.5); /* peak of the nucleus pulse */
  --paper-halo: rgb(247 245 240 / 0.55); /* halo around the click ring */
  --shadow-float: 0 1px 7px rgb(11 13 20 / 0.12); /* the floating `human` badge */
  /* Recessed surfaces: footer, table head, NOT_EVALUATED cell, lowered panel. The same tone as
     --paper-deep in light; dark splits them, because there --paper-deep has to go LIGHTER to
     show a hover and a recessed surface has to go darker. */
  --paper-sunken: var(--paper-deep);

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--indigo);
  --focus-ring-panel: 0 0 0 2px var(--panel), 0 0 0 4px var(--indigo);
  --focus-ring-band: 0 0 0 2px var(--ink-band), 0 0 0 4px var(--indigo-core);

  /* Tipografia */
  --font-sans:
    "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1: clamp(2.75rem, 1.2rem + 5.4vw, 6rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.8vw, 3.75rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem; /* piso: não existe texto menor */
  --fs-code: 0.8125rem;
  --fs-metric: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-numeral: clamp(3.5rem, 2rem + 7vw, 9rem);

  /* Espaço (base 4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section-y: clamp(72px, 5vw + 40px, 144px);
  --band-y: clamp(40px, 2.5vw + 24px, 72px);
  --panel-pad: clamp(20px, 1.5vw + 12px, 28px);

  /* Forma */
  --r-panel: 4px;
  --r-inner: 2px;
  --r-btn: 4px;
  --r-pill: 999px;
  --hairline: 1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);
  --shadow-panel: 0 1px 0 var(--rule);

  /* Grade */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --gap: 16px;
  --cols: 12;

  /* Cursores. Três desenhos e um vocabulário só: a SETA para andar na página, a MIRA para
     ler dado dentro de uma caixa de informação. As duas silhuetas foram ESCOLHIDAS pelo dono
     num catálogo de doze arquétipos por lado; o que está aqui é o par `01 · Sólida` e
     `03 · Cruz aberta`, e não uma variação do desenho que ele recusou antes.

     A SETA é MASSA CHEIA: sem contorno e sem miolo vazado. Geometria toda por conta: ponta em
     (4,3), eixo a 57°, meio-ângulo 21°, braços de 19,5 e 18, e o vértice do entalhe sobre a
     bissetriz a 12,375 da ponta — 0,66 do braço médio. A silhueta ocupa x[4; 19,78] e
     y[3; 20,61], então com 1,2 px de halo ainda sobra folga nos quatro lados da caixa de 24.

     Massa cheia apaga, por construção, a classe de defeito que dominava a silhueta anterior:
     não existe mais cobertura parcial a discutir, porque não existe traço fino a cobrir — o
     interior tem cobertura cheia e só a borda é antialiasada. Também não existe mais ponta
     sólida separada: ela era um caminho extra para dar um PONTO ao pixel do hotspot em vez de
     um vértice de contorno vazado, e numa massa cheia o pixel do hotspot já é massa.

     O halo é traço de papel no MESMO caminho, com a massa por cima: 2,4 de traço deixa 1,2 px
     de papel em volta. `stroke-linejoin: round` não é gosto — a razão de mitra no bico vale
     1/sen 21° = 2,790, abaixo do limite padrão 4, logo a mitra seria MANTIDA e o halo cresceria
     1,395 × 1,2 = 1,67 px À FRENTE da ponta, empurrando o bico visível para fora do hotspot.
     Junta redonda deixa exatamente 1,2 px em volta do vértice, e nada à frente dele.

     A MIRA é cruz pura: quatro braços nos eixos, de raio 5,5 a 11,4, com vão livre de 5,5 no
     centro. Sem anel e sem ponto — e isso derruba uma afirmação que já esteve escrita aqui: a
     mira NÃO é mais o núcleo do `design-spec.md` §8 numa quarta escala, porque o núcleo é ponto
     cheio dentro de anel e aqui não existe nenhum dos dois. O que a mantém desenho da casa é
     outra coisa, e essa dá para conferir: é tinta e não índigo, é alinhada aos eixos, e tem a
     espessura das réguas da página. O centro VAZIO é próprio do instrumento — é o que deixa
     ver o dado que está sendo lido —, e o preço é que em `medir` o pixel exato sob o cursor
     fica sem desenho. Em `ler` não fica: ali a massa da seta cobre a ponta.

     Estas três imagens são o caminho SEM JavaScript. Com JavaScript a página troca para o
     ponteiro do DOM, que inverte o fundo — o que uma imagem de cursor não faz. Por isso aqui
     a seta é tinta com halo de papel e a mira leva halo de papel por fora: sem inversão,
     desenho sem halo desaparece sobre a faixa de tinta.

     O halo resolve a seta e NÃO resolve a mira, e vale dizer por quê em vez de deixar
     parecendo que resolve as duas. A seta é massa: sobre a faixa de tinta a massa de tinta
     desaparece e sobra o contorno de papel, que é uma seta legível. A mira é traço: o miolo
     de tinta desaparece e sobram DOIS trilhos de papel de 0,9 px por braço, um de cada lado
     do miolo invisível. Conferido na bancada, sobre a faixa #0b0d14. Só que esse caso não
     acontece nesta página: `medir` vem de `:where(.panel)`, e a `.faixa--tinta` — a única
     superfície escura larga do documento — tem ZERO `.panel` dentro. A aba escura
     `.jornada__aba[aria-selected]` é clicável, logo `agir`, e também nunca recebe a mira. Se
     um dia entrar painel sobre fundo escuro, é aqui que a conta muda.
     Correction, 2026-09-22: two premises above no longer hold. `medir` now comes from
     `button`, not `.panel`, so the three `.jornada__aba` buttons DO get the crosshair, the
     selected one over its --ink-1 fill. And the dark theme put every panel on a dark ground.
     That theme answers it by swapping the colors of all three images in its own block (light
     core, dark halo), not by this paragraph's reasoning; the selected tab, inverted in both
     themes, still shows only the halo rails.

     Três diferenças honestas entre a imagem e o desenho do DOM, e todas saem da caixa de 24
     contra a de 40: o braço da mira vai a 11,4 em vez de 12,4 e o vão a 5,5 em vez de 6,0,
     com a proporção preservada (0,482 contra 0,484); o traço da mira é 2 nos DOIS, porque a
     mira desenhada ocupa raio 12,4 numa caixa de 40 e a imagem raio 11,4 numa de 24 — tamanho
     de tela quase igual, caixa diferente; e a seta ganha halo, que no DOM não existe porque
     lá o contraste vem da inversão.

     A cor carrega sentido e segue a regra da paleta — índigo só onde se clica: tinta para
     ler, tinta para medir, índigo para agir. A mira de v1 era índigo e contrariava isso.

     Sem fallback embutido: quem usa escreve `var(--cursor-ler), default`, porque a
     especificação exige palavra-chave depois do url(). */
  --cursor-ler: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%23f7f5f0%22%20stroke%3D%22%23f7f5f0%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%230b0d14%22%2F%3E%3C%2Fsvg%3E")
    4 3;
  --cursor-agir: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%23f7f5f0%22%20stroke%3D%22%23f7f5f0%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%234338ca%22%2F%3E%3C%2Fsvg%3E")
    4 3;
  --cursor-mira: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200.6v5.9M12%2017.5v5.9M0.6%2012h5.9M17.5%2012h5.9%22%20fill%3D%22none%22%20stroke%3D%22%23f7f5f0%22%20stroke-width%3D%223.8%22%20stroke-linecap%3D%22butt%22%2F%3E%3Cpath%20d%3D%22M12%200.6v5.9M12%2017.5v5.9M0.6%2012h5.9M17.5%2012h5.9%22%20fill%3D%22none%22%20stroke%3D%22%230b0d14%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22butt%22%2F%3E%3C%2Fsvg%3E")
    12 12;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 64px;
}

/*
 * DARK THEME. Selected by `data-theme="dark"` on <html>, which only `scripts/theme.js` writes:
 * the visitor's explicit choice first, otherwise `prefers-color-scheme`. Without JavaScript the
 * attribute never appears and the page stays light, as it always was.
 *
 * Inside `@media screen` on purpose: printing a dark page drops the backgrounds and leaves
 * light ink on white paper. Print always gets the light palette above.
 *
 * The light palette's rules hold here, re-measured on the four surfaces text sits on — --paper,
 * --paper-deep, --panel and --indigo-tint — with WCAG 2.x relative luminance:
 *   - every text color is >= 4.5:1 on all four; the floor is --ink-3 on --indigo-tint, 5.36:1
 *     (light: 5.08:1). The --escala-* ramp stays >= 7.4:1 on --panel and --paper at every
 *     point in between the stops, not only at the stops;
 *   - --rule-strong and --sig-glifo are >= 3:1 on all four; the floor is 3.41:1 on the tint.
 *     JSON and code punctuation is printed in --rule-strong in BOTH themes (3.4-4.0:1 here,
 *     3.3-3.8:1 in light, the floor on the highlighted rows): a pre-existing choice that treats `{ } : ,` as structure, kept
 *     as it is rather than silently changed by a palette swap.
 * --panel is lighter than --paper, as in light. Light uses one tone, --paper-deep, both for
 * hover/pressed and for recessed surfaces; dark cannot, because on near-black a hover has to
 * go lighter and a recess darker. So --paper-deep is the hover tone here (1.10:1 over --panel,
 * so a hover on a panel shows) and --paper-sunken the recess (#060709, 1.09:1 under --panel),
 * with --ink-3 at 6.8:1 and --rule-strong at 4.3:1 on it.
 *
 * Indigo flips direction instead of hue. The brand #4338ca as text on near-black is 2.5:1, so
 * the dark --indigo is a LIGHT indigo carrying DARK text (--ink-on-indigo, 9.9:1), and hover
 * and active go lighter, not darker. Its luminance is chosen for the DOM pointer too: the
 * pointer is white under `mix-blend-mode: difference`, so over a fill it shows as 255 minus
 * that fill, and a mid-luminance fill makes it vanish. #8189f8 left the pointer at 1.53:1 over
 * the primary button; #a5b4fc gives 4.31:1, the light theme's 4.27:1. Hover and active step
 * away from it as far as light's do (1.30:1 and 1.55:1, light 1.26:1 and 1.45:1), and being
 * lighter they only raise the pointer's contrast (8.5:1 and 13.0:1). It is also --indigo-core,
 * which is why the dot inside .nucleo--lg takes --nucleus-core (the paper) here, not the core.
 * The brand mark keeps its own #4338ca: it is an image, and it sits on its own square.
 *
 * The ink band stays the one different surface, as deep indigo ink instead of black: on a
 * black page a black band would vanish. 1.17:1 against --paper, 15.5:1 for its ink.
 *
 * The --escala-* stops are the same five hues lifted to pass on dark surfaces. None repeats
 * --sem-cool, for the same reason as in light: score 100 must not print as ALLOW.
 *
 * The three cursor images are the light ones with ink and halo swapped (light arrow, dark
 * halo, light-indigo arrow for `agir`): with JavaScript they are what the page shows instead of
 * the DOM pointer under reduced motion, and a dark arrow on a near-black page would be only its
 * halo.
 */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    /* Copied by value in scripts/theme.js (BROWSER_CHROME); --paper-halo and the halo of the
       three --cursor-* images below are paper-toned too. */
    --paper: #0a0b0f;
    --paper-deep: #1a1d26;
    --paper-sunken: #060709;
    --panel: #111319;
    --ink-band: #171a3a;

    --ink-1: #eceae4;
    --ink-2: #b3b7c9;
    --ink-3: #9095ab;
    --ink-on-band: #f7f5f0;
    --ink-on-indigo: #0a0b0f;

    --rule: #262933;
    --rule-strong: #6e7486;
    --rule-on-band: rgb(247 245 240 / 0.18);

    --indigo: #a5b4fc;
    --indigo-hover: #c7cefd;
    --indigo-active: #dde1fe;
    --indigo-tint: #1d1f3f;
    --indigo-halo: rgb(165 180 252 / 0.35);
    --indigo-core: #a5b4fc;
    --nucleus-core: var(--paper);

    --sig-presente: #bfc3fd;
    --sig-glifo: #6e7486;

    --sem-cool: #4cc3a5;
    --sem-warm: #f29a62;
    --erro: #f28b8b;

    --escala-0: #f2848a;
    --escala-40: #f0a05a;
    --escala-60: #d6b340;
    --escala-80: #a5c75e;
    --escala-100: #72c476;
    --escala-nula: #9095ab;

    --scroll-hint: rgb(236 234 228 / 0.08);
    --wash: rgb(236 234 228 / 0.08);
    --detected-edge: rgb(191 195 253 / 0.4);
    --indigo-edge: rgb(165 180 252 / 0.35);
    --indigo-pulse: rgb(165 180 252 / 0.5);
    --paper-halo: rgb(10 11 15 / 0.55);
    --shadow-float: 0 1px 7px rgb(0 0 0 / 0.6);

    --cursor-ler: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%230a0b0f%22%20stroke%3D%22%230a0b0f%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%23eceae4%22%2F%3E%3C%2Fsvg%3E")
      4 3;
    --cursor-agir: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%230a0b0f%22%20stroke%3D%22%230a0b0f%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%203L19.78%2014.46L10.74%2013.38L7.74%2020.61Z%22%20fill%3D%22%23a5b4fc%22%2F%3E%3C%2Fsvg%3E")
      4 3;
    --cursor-mira: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200.6v5.9M12%2017.5v5.9M0.6%2012h5.9M17.5%2012h5.9%22%20fill%3D%22none%22%20stroke%3D%22%230a0b0f%22%20stroke-width%3D%223.8%22%20stroke-linecap%3D%22butt%22%2F%3E%3Cpath%20d%3D%22M12%200.6v5.9M12%2017.5v5.9M0.6%2012h5.9M17.5%2012h5.9%22%20fill%3D%22none%22%20stroke%3D%22%23eceae4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22butt%22%2F%3E%3C%2Fsvg%3E")
      12 12;
  }
}

@media (max-width: 767px) {
  :root {
    --cols: 1;
    --nav-h: 56px;
  }
}
@media (min-width: 768px) {
  :root {
    --cols: 6;
    --gap: 12px;
  }
}
@media (min-width: 1024px) {
  :root {
    --cols: 12;
    --gap: 16px;
  }
}
@media (min-width: 1280px) {
  :root {
    --gap: 20px;
  }
}