/* Fuente única de los colores (y de la fuente mono) que comparten popup.css, options.css y panel.css (ROADMAP §3.50, de INFORMES §15). Hasta hoy el mismo azul y los mismos grises estaban escritos a mano en las tres hojas — la lista espejo de §8.5 sin ninguna frontera física que la justifique: las tres páginas son HTML normal, cargan CSS con como cualquier otra, nada les impide leer de un fichero común. EL AZUL CAMBIÓ el 23 sep 2026, al construir el primer consumidor real (popup, ROADMAP §3.50): de `#4a63e7` (el de siempre) a `#1667c7`, el de la portada del sitio (INFORMES §15.6, decidido por el autor el 22 sep 2026) — con su mismo par de tonos "fuerte" para el estado `:hover`, no uno inventado aquí. Como options.css y panel.css ya leían este token por variable, los dos heredan el azul nuevo aunque su propio rediseño no haya empezado todavía; es justo lo que tokens.css existe para permitir sin que nadie tenga que tocarlos. Contraste comprobado a mano (CLAUDE.md: jsdom no resuelve `var()`) contra blanco/negro-casi y contra las superficies reales de las tres hojas, claro y oscuro: el más bajo de los ocho pares da 5,53:1, muy por encima del 4,5:1 de AA. LO QUE ESTE FICHERO NO HACE: no decide CUÁNDO se aplica el tema oscuro. Ese mecanismo es distinto en cada superficie a propósito —popup y options siguen `prefers-color-scheme` (el tema del sistema operativo); el panel sigue `:root[data-theme="dark"]`, que fija panel.js según el tema de las propias DevTools, no el del sistema (ROADMAP §6.4 lo explica para `browser.js`; aquí es el mismo cuidado aplicado a CSS)— y unificar el mecanismo dejaría al panel sin seguir a DevTools, que es justo lo que se le pide. Por eso aquí solo hay VALORES en bruto, con nombre de paleta: cada CSS de superficie sigue escribiendo su propio :root / @media / [data-theme] y solo cambia el hexadecimal fijo por un var(--nt-…) que apunta aquí. `src/help/help.html` se queda fuera a propósito. Sus colores están escritos a mano, sin variables y sin tema oscuro —el sitio publicado lo retiñe por fuera, vía site/assets/docs.css, que es un fichero distinto de este—. Sumarlo aquí sería decidir de paso si la ayuda de la extensión necesita tema oscuro, y eso no lo pide ROADMAP §3.50: es una pregunta aparte. Tampoco viven aquí `--radius`/`--radius-sm`/`--shadow` de cada superficie (8/6px en popup, 10/6px en options, solo 5px en panel), ni los colores que solo usa una superficie (`--warn-*` del popup, `--gql`/`--warning-*` del panel): no son la misma paleta repetida, son decisiones de maquetación propias de cada una, y compartirlas ataría una a los cambios de las otras dos sin ningún motivo. */ :root { /* Escala neutra, tema claro */ --nt-white: #ffffff; --nt-gray-50: #f6f7fb; --nt-gray-200: #e3e5ea; --nt-gray-500: #6b7280; --nt-gray-900: #1a1d29; /* Azul de marca, tema claro. --nt-blue-700 es el "primary-strong" de la portada (`nt-sitio/poc/sitio/sitio.css`): más oscuro, para :hover y para texto que necesite más contraste que el azul base. */ --nt-blue-600: #1667c7; --nt-blue-700: #0f4f9e; /* El "primary-soft" de la portada: fondo tenue para una insignia de método GET (ROADMAP §3.50, "el panel"), a juego con --nt-blue-700 encima. 6,95:1 medido a mano. Hoy solo lo usa panel.css. */ --nt-blue-soft-light: #e8f0fb; /* Contorno de un control en su estado apagado (ROADMAP §3.50, popup). `--nt-gray-200` (el `--border` normal) mide 1,26:1 contra una superficie clara — casi invisible, que es justo lo que le pasaba al interruptor apagado del popup. Este tono sí llega al 3:1 que WCAG pide a un control (2.2 Non-text Contrast): 3,4:1 o más contra cualquier fondo de las tres hojas, en los dos temas. Hoy solo lo usa popup.css. */ --nt-border-strong-light: #7b8797; --nt-border-strong-dark: #6d7c90; /* Insignia de estado HTTP: rellena, con su propio par texto/fondo por familia (2xx/3xx/4xx/5xx), igual que la pestaña Red de DevTools — el mismo criterio que ya sigue `panel.css` para `--warning-*`. Los ocho pares miden 4,5:1 o más contra su propio fondo, en los dos temas. Hoy solo los usa popup.css (la insignia de estado no existía antes). */ --nt-s2-light: #17703a; --nt-s2-bg-light: #e5f4ea; --nt-s3-light: #066a85; --nt-s3-bg-light: #e2f3f7; --nt-s4-light: #855400; --nt-s4-bg-light: #fbf0da; --nt-s5-light: #b42318; --nt-s5-bg-light: #fdecea; --nt-s2-dark: #5cd283; --nt-s2-bg-dark: #10291a; --nt-s3-dark: #5fd3ee; --nt-s3-bg-dark: #0e2830; --nt-s4-dark: #f0c050; --nt-s4-bg-dark: #2d2310; --nt-s5-dark: #ff8f85; --nt-s5-bg-dark: #33171a; /* Insignia de TIPO de regla: con borde, nunca rellena y nunca con número — lo opuesto de la de estado a propósito, para que la forma sola diga cuál es cuál (ROADMAP §3.50, "colores por tipo"). Reemplaza a `RULE_TYPE_COLORS` de shared.js, que llevaba UN valor por tipo y no se enteraba del tema: violeta/magenta para ocho tipos y oliva para "Parámetro de query" —el único que antes era ámbar, chocando con el 4xx de arriba—, fuera del verde/cian/ámbar/rojo de los estados y del azul de --primary a propósito, para no competir con ninguno de los dos. En oscuro se ACLARAN (más luminosidad) en vez de reutilizar el hex de claro, que es justo lo que le faltaba al marrón/índigo que tenía la extensión antes de este cambio: casi no se veían sobre fondo oscuro. Los dieciocho miden 5,4:1 o más contra su superficie, en los dos temas — medido igual que el resto de este fichero y heredado literal de `nt-sitio/poc/sitio/extension.es.html` (INFORMES §15), que ya lo había verificado. Sigue siendo una lista espejo de `RULE_TYPES` (shared.js) sin más remedio —CSS no puede leer una constante de JavaScript— y por eso tiene su test de consistencia (tests/rule-type-colors.test.js), que faltaba en la prueba de concepto. */ --nt-rt-headers-light: #34257e; --nt-rt-cancel-light: #46257e; --nt-rt-requestBody-light: #58257e; --nt-rt-replaceString-light: #6a257e; --nt-rt-redirect-light: #7b257e; --nt-rt-noop-light: #7e2570; --nt-rt-response-light: #7e255e; --nt-rt-responseBody-light: #7e254c; --nt-rt-queryParam-light: #5e6b19; --nt-rt-headers-dark: #9989e6; --nt-rt-cancel-dark: #ab89e6; --nt-rt-requestBody-dark: #be89e6; --nt-rt-replaceString-dark: #d089e6; --nt-rt-redirect-dark: #e389e6; --nt-rt-noop-dark: #e689d7; --nt-rt-response-dark: #e689c4; --nt-rt-responseBody-dark: #e689b1; --nt-rt-queryParam-dark: #bed161; /* Estado (aviso/éxito), tema claro. Ya eran el mismo valor en options.css y panel.css — el comentario de options.css lo decía de `--ok`: "los valores son los mismos que ya usa src/devtools/panel.css... dos verdes distintos para lo mismo en dos superficies del producto no ayudan a nadie". Ese préstamo se hace explícito aquí. */ --nt-red-500: #e5484d; --nt-green-700: #2e7d32; /* Escala neutra, tema oscuro */ --nt-ink-900: #14151c; --nt-ink-800: #1c1e29; --nt-ink-700: #2c2f3d; --nt-ink-200: #e7e8ef; --nt-ink-400: #9498a8; /* El casi-negro que llevan los TRES --primary-text en tema oscuro. No es --nt-ink-900 (ese es el fondo de página de popup/options; el panel ni siquiera lo usa, ver panel.css) — es un cuarto tono, deliberadamente más oscuro, pensado solo para texto sobre el azul de marca. */ --nt-near-black: #0e0f16; /* Azul de marca, tema oscuro. Mismo origen que el de arriba: el `--primary`/`--primary-strong` oscuros de la portada, no un cálculo propio de este fichero. */ --nt-blue-400: #5aa4f0; --nt-blue-300: #86bdf6; /* Pareja de --nt-blue-soft-light. 7,63:1 medido a mano. */ --nt-blue-soft-dark: #132740; /* El cian de acento, que es el `--accent` oscuro de la portada. Sube aquí el 25 sep 2026 porque dejó de ser cosa del sitio: es el destello del centro del ICONO (§3.53), así que viaja en el zip. Estaba escrito a mano en `gen-ficha.mjs` y volvió a estarlo en `gen-icono.mjs` en cuanto hubo dos sitios que lo pintaban — que es exactamente cómo empiezan los colores caducados de este proyecto. No lo usa ninguna superficie de la extensión todavía; lo usan los dos generadores de arte, y por eso está en la mitad oscura: el icono se dibuja sobre fondos oscuros tanto como claros, pero el tono es éste. */ --nt-cyan-400: #45cdea; /* Estado (aviso/éxito), tema oscuro */ --nt-red-300: #f2777c; --nt-green-400: #7bc47f; /* La fuente mono, compartida porque el CRITERIO lo es: "lo que se cuenta va en sans; lo que se escribe tal cual en una petición —patrones, códigos, nombres de entorno— va en mono", el mismo que ya sigue la portada del sitio (INFORMES §15). No es un color y no cambia con el tema, así que no lleva bloque de tema oscuro aparte. */ --nt-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }