@netzi/tokens 0.1.0-beta.8

package/styles/tokens.css

@@ -0,0 +1,665 @@
+/* ===========================================================
+   @netzi/tokens — Design tokens (CSS custom properties)
+
+   Ejes de tema (los aplica NetziThemeService sobre <html>):
+     [data-theme=dark]        → tema OSCURO (default: claro)
+     [data-preset=...]        → color primario (blue|green|purple|orange|red|cyan)
+     [data-contrast=high]     → más contraste (bordes/texto)
+     [data-glass=on]          → capas flotantes de cristal (translúcidas)
+     [data-density=compact]   → controles más compactos
+     dir=rtl                  → de derecha a izquierda (CSS usa props lógicas)
+     --netzi-font-sans inline → familia tipográfica
+
+   El PRIMARIO (`--netzi-primary*`) es themeable por preset. Los colores de
+   marca/semánticos (blue/green/purple/red/yellow) son constantes y se usan para
+   estados fijos, que además tienen su alias por lo que significan
+   (`--netzi-info`, `--netzi-success`, `--netzi-warning`, `--netzi-danger`).
+
+   OVERRIDE (white-label por app): redefine cualquier token en tu propio scope.
+   Las actualizaciones de este paquete cambian SOLO los defaults.
+   =========================================================== */
+
+:root {
+  /* --- Acentos de marca / semánticos (constantes) --- */
+  --netzi-blue: #0ba5ff;
+  --netzi-blue-dark: #0476c2;
+  --netzi-green: #0ae972;
+  --netzi-purple: #8c4cff;
+  --netzi-red: #ff6b6b;
+  --netzi-yellow: #f0c040;
+
+  /* --- Los mismos colores, pero PARA TEXTO ---
+     Los de arriba son de RELLENO: saturados para que un fondo, un punto de
+     estado o una barra de gráfica se vean. Sobre una superficie clara, como
+     texto, no llegan ni de lejos al mínimo (el verde daba 1.63:1). Estos son su
+     versión legible, oscurecida en claro y aclarada en oscuro solo donde hace
+     falta. Si lo que pintas se lee, va el `-text`; si es relleno, el de arriba. */
+  --netzi-blue-text: #076aa3;
+  --netzi-green-text: #05773a;
+  --netzi-yellow-text: #7d6421;
+  --netzi-red-text: #a34444;
+  --netzi-purple-text: #743fd4;
+
+  /* --- Alias SEMÁNTICOS de estado ---
+     El mismo color con el nombre de lo que significa. Existen porque toda app
+     los da por hechos, y un token que no existe **muere en silencio**: la
+     declaración entera se descarta (sin fondo, sin color, sin radio) sin un
+     aviso en build ni en consola. Se declaran como referencia, no como copia,
+     para que sigan al color aunque este cambie. Mismo reparto de papeles que
+     arriba: el crudo es RELLENO, el `-text` es lo que se lee. */
+  --netzi-info: var(--netzi-blue);
+  --netzi-success: var(--netzi-green);
+  --netzi-warning: var(--netzi-yellow);
+  --netzi-danger: var(--netzi-red);
+  --netzi-info-text: var(--netzi-blue-text);
+  --netzi-success-text: var(--netzi-green-text);
+  --netzi-warning-text: var(--netzi-yellow-text);
+  --netzi-danger-text: var(--netzi-red-text);
+
+  /* --- Alias por SIMETRÍA ---
+     El primer escalón de cada escala no lleva número (`--netzi-surface` y
+     `--netzi-surface-2`), y quien ve el `-2` escribe el `-1`. Igual con el radio
+     medio, que se llama `--netzi-radius` a secas. Son el mismo valor con el
+     nombre que la app espera, por el mismo motivo que los de arriba. */
+  --netzi-surface-1: var(--netzi-surface);
+  --netzi-text-1: var(--netzi-text);
+  --netzi-radius-md: var(--netzi-radius);
+
+  /* --- Color PRIMARIO (themeable por preset; default = azul) --- */
+  --netzi-primary: var(--netzi-blue);
+  --netzi-primary-dark: var(--netzi-blue-dark);
+  /* La TINTA sobre el relleno del primario. Cada preset usa la que cumple sobre
+     SU color, no una fija: el blanco sobre el azul da 2.68:1 y la tinta oscura
+     7.05:1. Verde, naranja y cyan ya venían así; el azul y el rojo se suman. */
+  --netzi-on-primary: #04121f;
+  /* El primario PARA TEXTO (enlaces, ítem activo del menú, cifras destacadas).
+     Cada preset lo redefine: el crudo no llega a 4.5:1 sobre superficie clara. */
+  --netzi-primary-text: #076ba6;
+  /* Lo que va ENCIMA de `--netzi-primary-dark`: el pulgar del interruptor, la
+     marca del checkbox, el punto del radio. Es blanco en TODOS los presets: el
+     primario oscuro es lo bastante oscuro para que el blanco pase de 3:1 (el
+     mínimo de un control) en cada uno —3.2 en naranja, 3.3 en verde, 4.7+ en
+     azul, rojo y morado—; lo verifica `tokens-contrast.spec.ts`. `--netzi-on-primary`
+     no sirve para esto: sobre el azul claro tiene que ser casi negro, y un pulgar
+     negro sobre un interruptor azul se ve raro (queja literal del usuario). */
+  --netzi-on-primary-dark: #ffffff;
+  /* El pulgar de un interruptor o de un deslizador. OPACO y literal a propósito:
+     iba con `--netzi-surface`, y dentro de un panel de cristal esa superficie es
+     un tinte translúcido (re-escopada por el panel), así que el pulgar salía como
+     un agujero oscuro con un aro. Blanco en los dos temas, como el de cualquier
+     sistema: sobre la pista apagada (`surface-3`) y sobre la encendida
+     (`primary-dark`) se ve igual de bien. */
+  --netzi-thumb: #ffffff;
+  /* Tinte del primario, derivado automáticamente (cambia con el preset). */
+  --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 10%, transparent);
+  /* El mismo tinte, MARCADO. El del 10 % está calibrado para superficies
+     grandes (una fila resaltada, un panel); en una pieza pequeña —un chip, una
+     píldora— se pierde contra el fondo: sobre `surface-3` da 1.13:1 y no se
+     distingue. Este llega a 1.32:1, que sí se ve.
+     ⚠️ Su tinta es `--netzi-text` (≥9:1 con cualquier preset). NO vale
+     `--netzi-primary-text` encima: sobre este tinte se queda en 3.9:1, y por eso
+     el tinte suave no se puede subir sin más — es el techo del otro. */
+  --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 22%, transparent);
+
+  /* --- Tema CLARO: superficies --- */
+  --netzi-bg: #f7f9fb;
+  --netzi-surface: #ffffff;
+  --netzi-surface-2: #f4f6f8;
+  --netzi-surface-3: #eef1f4;
+
+  /* --- Tema CLARO: bordes --- */
+  --netzi-border: #eaedf0;
+  --netzi-border-2: #dce0e5;
+
+  /* --- Capas FLOTANTES ---
+     Las que se pintan ENCIMA del contenido: topbar, sidebar, paneles anclados,
+     modal, drawer, menús, tooltips y toasts. Por defecto son exactamente la
+     superficie opaca de siempre; el eje [data-glass=on] las convierte en
+     cristal sin que ningún componente tenga que enterarse (ver GLASS abajo).
+     Los valores van literales, no como `var(--netzi-surface)`, porque el modo
+     cristal los redefine y una referencia cruzada crearía un ciclo. */
+  --netzi-float-bg: #ffffff;
+  --netzi-float-border: #eaedf0;
+  --netzi-float-border-2: #dce0e5;
+  /* Superficies ANIDADAS dentro de una capa flotante (una tarjeta en el drawer,
+     la burbuja de un comentario en el popover, el hover de un botón). Sin
+     cristal son las superficies de siempre; con cristal, tintes translúcidos
+     (ver el bloque de cristal). Los paneles las re-escopan como
+     `--netzi-surface*` para que TODO lo que llevan dentro las herede. */
+  --netzi-float-surface: #ffffff;
+  --netzi-float-surface-2: #f4f6f8;
+  --netzi-float-surface-3: #eef1f4;
+  --netzi-float-filter: none;
+  /* La MISMA cadena que `--netzi-float-filter`, en identidad. Es el punto del
+     que PARTE la entrada de un panel de cristal y al que llega su salida: el
+     desenfoque se anima de 0 a su valor (un tirón de foco), porque un fundido
+     por `opacity` no vale — con opacidad < 1 el elemento (o su capa) deja de
+     ver la página y el cristal se apaga justo mientras entra. Mismo orden de
+     funciones que el token real: si no coinciden, no se interpola. */
+  --netzi-float-filter-identity: saturate(1) contrast(1) brightness(1) blur(0);
+  --netzi-float-glow: 0 0 rgba(0, 0, 0, 0);
+
+  /* --- VELO de las capas modales ---
+     Lo que se pinta DETRÁS de un modal, un drawer o la paleta ⌘K para apagar el
+     contenido. Es un token porque cada componente lo llevaba escrito a mano y no
+     coincidían: modal, drawer y ⌘K iban a `rgba(8,12,20,.55)` con `blur(2px)` y
+     `connection-guard` a `.62` con `blur(3px)`, así que la misma app se oscurecía
+     distinto según qué capa la tapara. */
+  --netzi-scrim: rgba(8, 12, 20, 0.28);
+  --netzi-scrim-filter: blur(1px);
+
+  /* --- Tema CLARO: texto ---
+     Tres niveles con papeles DISTINTOS, no tres grados de gris intercambiables
+     (ver la tabla de la sección TEXTO al final del archivo):
+       text    → texto principal.
+       text-2  → CUALQUIER texto secundario legible (rótulos, ayudas, pies,
+                 metadatos, placeholders). Es el suelo de 4.5:1 para texto.
+       text-3  → NO textual: iconos decorativos, separadores, chevrons, líneas y
+                 estados deshabilitados. Cumple 3:1 (SC 1.4.11), no 4.5:1. */
+  --netzi-text: #1c252e;
+  --netzi-text-2: #5c6b78;
+  --netzi-text-3: #7a8996;
+  /* Tinta sobre un relleno de color de marca (verde, rojo, amarillo…): todos son
+     claros, así que la oscura es la que cumple. El blanco daba 2.78:1 sobre el
+     rojo del contador de notificaciones. */
+  --netzi-on-accent: #04121f;
+
+  /* --- Tema CLARO: sombras --- */
+  --netzi-shadow-sm: 0 1px 2px rgba(145, 158, 171, 0.16);
+  --netzi-shadow: 0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
+  --netzi-shadow-lg: 0 0 2px rgba(145, 158, 171, 0.2), 0 16px 40px -8px rgba(145, 158, 171, 0.24);
+
+  /* --- Tinte de acento (alias histórico del tinte del primario) --- */
+  --netzi-tint: var(--netzi-primary-tint);
+
+  /* --- Forma --- */
+  --netzi-radius-sm: 6px;
+  --netzi-radius: 8px;
+  --netzi-radius-lg: 10px;
+
+  /* --- Espaciado ---
+     Escala de gaps/paddings de layout (base 4px). Usa estos tokens en la app en
+     vez de píxeles/rem sueltos para mantener el ritmo del sistema. La densidad
+     compacta reduce los pasos medios/grandes. */
+  --netzi-space-0: 0;
+  --netzi-space-1: 2px;
+  --netzi-space-2: 4px;
+  --netzi-space-3: 8px;
+  --netzi-space-4: 12px;
+  --netzi-space-5: 16px;
+  --netzi-space-6: 24px;
+  --netzi-space-7: 32px;
+  --netzi-space-8: 48px;
+
+  /* --- Densidad de controles (la cambia [data-density=compact]) --- */
+  --netzi-control-py: 12px;
+  --netzi-control-px: 14px;
+
+  /* --- Tamaño estándar de controles (sm/md/lg) ---
+     Altura FIJA por tamaño para que todos los inputs de valor y el botón midan
+     exactamente lo mismo y alineen al ponerlos en fila. Escalan con
+     `--netzi-font-scale` (ajuste de accesibilidad) para no recortar el texto.
+     La densidad compacta las reduce. */
+  --netzi-control-h-sm: calc(36px * var(--netzi-font-scale, 1));
+  --netzi-control-h-md: calc(44px * var(--netzi-font-scale, 1));
+  --netzi-control-h-lg: calc(52px * var(--netzi-font-scale, 1));
+  --netzi-control-px-sm: 12px;
+  --netzi-control-px-md: 14px;
+  --netzi-control-px-lg: 16px;
+  --netzi-control-fs-sm: calc(13.5px * var(--netzi-font-scale, 1));
+  --netzi-control-fs-md: calc(15px * var(--netzi-font-scale, 1));
+  --netzi-control-fs-lg: calc(16px * var(--netzi-font-scale, 1));
+
+  /* --- Tipografía --- */
+  --netzi-font-sans: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
+  --netzi-font-mono: 'Fira Code', ui-monospace, monospace;
+
+  /* Escala global del tamaño de letra (1 = 100%). Los componentes calculan
+     sus tamaños como calc(Npx * escala); la cambia el panel de ajustes. */
+  --netzi-font-scale: 1;
+
+  /* --- Escala tipográfica (#51) ---
+     El texto que NO es un control (una línea secundaria bajo un título, un pie
+     de tarjeta, un metadato, un título de página) no tenía token: cada app se
+     inventaba la suya y `var(--netzi-font-size-xs)` —que parece existir— se
+     descartaba en silencio. Los pasos salen de lo que el kit ya usa (picos en
+     11 · 12.5 · 14 · 16 · 18 · 22 · 28), con ratio ≈1.15 y **md = 14px**, que es
+     el 100 % de `--netzi-font-scale` (el panel de ajustes divide entre 14).
+     Todos escalan con el ajuste de accesibilidad, como los controles. Los
+     tamaños de los controles (`--netzi-control-fs-*`) son otra familia: van
+     ligados a la altura del control, no a esta escala. La densidad compacta no
+     los toca: el texto no se encoge, se encoge el aire. */
+  --netzi-font-size-xs: calc(11px * var(--netzi-font-scale, 1));
+  --netzi-font-size-sm: calc(12.5px * var(--netzi-font-scale, 1));
+  --netzi-font-size-md: calc(14px * var(--netzi-font-scale, 1));
+  --netzi-font-size-lg: calc(16px * var(--netzi-font-scale, 1));
+  --netzi-font-size-xl: calc(18px * var(--netzi-font-scale, 1));
+  --netzi-font-size-2xl: calc(22px * var(--netzi-font-scale, 1));
+  --netzi-font-size-3xl: calc(28px * var(--netzi-font-scale, 1));
+
+  /* Interlineado, sin unidad (se multiplica por el tamaño de cada elemento).
+     `none` para lo que mide una línea (controles, chips); `tight` para
+     títulos; `normal` para texto corriente; `relaxed` para lectura larga. */
+  --netzi-line-height-none: 1;
+  --netzi-line-height-tight: 1.25;
+  --netzi-line-height-normal: 1.5;
+  --netzi-line-height-relaxed: 1.65;
+
+  /* Peso. Los cinco que usa el kit; la fuente cargada (`fonts.css`) trae
+     exactamente estos cortes, otro valor se sintetiza y se ve peor. */
+  --netzi-font-weight-regular: 400;
+  --netzi-font-weight-medium: 500;
+  --netzi-font-weight-semibold: 600;
+  --netzi-font-weight-bold: 700;
+  --netzi-font-weight-extrabold: 800;
+}
+
+[data-theme='dark'] {
+  /* --- Tema OSCURO: superficies --- */
+  --netzi-bg: #0d1117;
+  --netzi-surface: #161b22;
+  --netzi-surface-2: #0d1117;
+  --netzi-surface-3: #21262d;
+
+  /* --- Tema OSCURO: bordes --- */
+  --netzi-border: #21262d;
+  --netzi-border-2: #30363d;
+
+  /* --- Tema OSCURO: capas flotantes --- */
+  --netzi-float-bg: #161b22;
+  --netzi-float-border: #21262d;
+  --netzi-float-border-2: #30363d;
+  --netzi-float-surface: #161b22;
+  --netzi-float-surface-2: #0d1117;
+  --netzi-float-surface-3: #21262d;
+
+  /* --- Tema OSCURO: los semánticos como texto ---
+     Sobre fondo oscuro casi todos sirven crudos; solo el rojo y el morado piden
+     un punto de luz para llegar al mínimo. */
+  --netzi-blue-text: #0ba5ff;
+  --netzi-green-text: #0ae972;
+  --netzi-yellow-text: #f0c040;
+  --netzi-red-text: #ff7272;
+  --netzi-purple-text: #ac7eff;
+  --netzi-primary-text: #0da6ff;
+
+  /* --- Tema OSCURO: texto (mismos papeles que en claro) --- */
+  --netzi-text: #ffffff;
+  --netzi-text-2: #8b949e;
+  --netzi-text-3: #6e7681;
+  --netzi-on-accent: #04121f;
+
+  /* --- Tema OSCURO: sombras --- */
+  --netzi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --netzi-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -6px rgba(0, 0, 0, 0.45);
+  --netzi-shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 50px -10px rgba(0, 0, 0, 0.6);
+
+  /* El tinte sube un poco de alfa en oscuro. */
+  --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 15%, transparent);
+  --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 28%, transparent);
+}
+
+/* ===========================================================
+   PRESETS de color primario
+   =========================================================== */
+[data-preset='green'] {
+  --netzi-primary: #0ae972;
+  --netzi-primary-dark: #07a352;
+  --netzi-on-primary: #04121f;
+  --netzi-primary-text: #05793b;
+}
+/* El morado es el ÚNICO preset donde la tinta oscura no cumple (4.13): se queda
+   en blanco, que sí (4.57). La regla es «la que cumpla sobre su color». */
+[data-preset='purple'] {
+  --netzi-primary: #8c4cff;
+  --netzi-primary-dark: #6a2fd6;
+  --netzi-on-primary: #ffffff;
+  --netzi-primary-text: #7841db;
+}
+[data-preset='orange'] {
+  --netzi-primary: #f0a020;
+  --netzi-primary-dark: #c97e0a;
+  --netzi-on-primary: #04121f;
+  --netzi-primary-text: #8e5e13;
+}
+[data-preset='red'] {
+  --netzi-primary: #ff5630;
+  --netzi-primary-dark: #d63916;
+  --netzi-on-primary: #04121f;
+  --netzi-primary-text: #b53d22;
+}
+[data-preset='cyan'] {
+  --netzi-primary: #00b8d9;
+  --netzi-primary-dark: #0892ab;
+  --netzi-on-primary: #04121f;
+  --netzi-primary-text: #007287;
+}
+
+/* El primario para TEXTO en oscuro: los saturados ya sirven, salvo dos. */
+[data-theme='dark'][data-preset='green'] {
+  --netzi-primary-text: #0ae972;
+}
+[data-theme='dark'][data-preset='purple'] {
+  --netzi-primary-text: #ad80ff;
+  /* El morado oscuro de claro (#6a2fd6) se hunde en el fondo oscuro (2.7:1): un
+     interruptor encendido apenas se distinguía de la tarjeta. */
+  --netzi-primary-dark: #7d48f2;
+}
+[data-theme='dark'][data-preset='orange'] {
+  --netzi-primary-text: #f0a020;
+}
+[data-theme='dark'][data-preset='red'] {
+  --netzi-primary-text: #ff6a49;
+}
+[data-theme='dark'][data-preset='cyan'] {
+  --netzi-primary-text: #00b8d9;
+}
+
+/* ===========================================================
+   CONTRASTE alto: bordes y texto más marcados
+   =========================================================== */
+/* Cada nivel de texto toma el valor del nivel de encima: text-2 sube al tono
+   reforzado y text-3 hereda el text-2 por defecto. Así `text-3` pasa de 3:1 a
+   más de 4.5:1 y el modo cumple incluso donde alguien lo haya usado para texto,
+   que es justo lo que se espera de un modo de alto contraste. */
+[data-contrast='high'] {
+  --netzi-border: #c9cfd6;
+  --netzi-border-2: #aeb6bf;
+  --netzi-text-2: #2a333c;
+  --netzi-text-3: #5c6b78;
+  --netzi-float-border: #c9cfd6;
+  --netzi-float-border-2: #aeb6bf;
+  --netzi-shadow-sm: 0 1px 2px rgba(99, 115, 129, 0.3);
+}
+
+[data-theme='dark'][data-contrast='high'] {
+  --netzi-border: #3a434d;
+  --netzi-border-2: #525c66;
+  --netzi-text-2: #aab4bf;
+  --netzi-text-3: #8b949e;
+  --netzi-float-border: #3a434d;
+  --netzi-float-border-2: #525c66;
+}
+
+/* ===========================================================
+   GLASS: las capas flotantes, de cristal
+
+   Translúcidas, con el fondo desenfocado y saturado por detrás. Se activa con
+   `data-glass="on"` en <html> (lo pone NetziThemeService), y solo afecta a las
+   capas que FLOTAN sobre el contenido: las superficies de contenido —tarjetas,
+   secciones, tablas— siguen opacas, porque ahí el cristal solo resta.
+
+   Sobre cristal el texto NO se lee contra una superficie fija: se lee contra lo
+   que haya debajo, que cambia al scrollear. El peor caso es "negro puro debajo"
+   en claro y "blanco puro debajo" en oscuro, y es ESE el que tiene que cumplir
+   4.5:1. Hay dos formas de conseguirlo y solo una deja que esto parezca cristal:
+
+     - Subir el alfa hasta tapar el fondo. Cumple, pero con 0.82 ya es
+       prácticamente una superficie opaca: se pierde el efecto entero.
+     - **Acotar el fondo con el propio filtro**: `contrast()` comprime su rango
+       hacia el medio y `brightness()` lo empuja hacia el tono de la capa (arriba
+       en claro, abajo en oscuro). Al entrar ya acotado, un alfa MUCHO más bajo
+       basta para el mismo suelo — y con menos alfa se ve lo de detrás, que es
+       justo de lo que va el efecto.
+
+   Por eso el filtro no es solo `blur`: cada función tiene un papel.
+     saturate(180%)  el color de debajo se aviva al difuminarse (lo vistoso).
+     contrast(0.6)   comprime el rango del fondo hacia el gris medio.
+     brightness()    lo empuja al tono de la capa: >1 en claro, <1 en oscuro.
+     blur(28px)      lo difumina; cuanto más ancho, más "vidrio esmerilado".
+
+   Medido con esa cadena: en los dos temas el plano
+   contrario puro debajo (negro en claro, blanco en oscuro) es el único caso
+   donde el texto secundario cede a ~4.1-4.2:1 con el primario ≥ 4.5; contra
+   el fondo del kit y contra un gris medio, ambos pasan de 6:1. Sin la compresión del filtro haría falta alfa 0.82 para
+   el mismo suelo, y a 0.82 esto ya no parece cristal. Lo verifica
+   `tokens-contrast.spec.ts`, que modela la cadena entera —no solo el alfa—, así
+   que tocar cualquiera de las cuatro funciones o el alfa mueve el veredicto.
+   =========================================================== */
+[data-glass='on'] {
+  --netzi-float-bg: rgba(255, 255, 255, 0.44);
+  --netzi-float-border: rgba(255, 255, 255, 0.7);
+  --netzi-float-border-2: rgba(255, 255, 255, 0.85);
+  /* Lo anidado en un panel de cristal también es vidrio: una tarjeta opaca
+     dentro de un drawer translúcido era exactamente la queja («hay elementos
+     que no se ponen translúcidos»). Los tres son tintes OSCUROS que se alejan
+     de la lámina un paso, dos y tres, a LA MISMA distancia que las superficies
+     opacas que imitan: `#f4f6f8` es un 4,5 % de tinta sobre blanco y `#eef1f4`
+     un 7,5 %. Más fuertes (se probó al 9 y al 13 %) las tarjetas de un drawer
+     salían como placas grises, como deshabilitadas. Un tinte blanco no vale: la
+     lámina clara ya es casi blanca y la burbuja de un comentario desaparecía
+     sobre ella. Oscurecer resta contraste al texto, y por eso `--netzi-text-2`
+     baja aquí dos niveles; el guardián comprueba que sobre el tinte más fuerte
+     sigue por encima de 4.5:1 con negro puro debajo. */
+  --netzi-float-surface: rgba(28, 37, 46, 0.02);
+  --netzi-float-surface-2: rgba(28, 37, 46, 0.045);
+  --netzi-float-surface-3: rgba(28, 37, 46, 0.075);
+  /* Alfa 0.44, brillo 1.25 y solo 10 px de desenfoque, para que se vea lo que
+     hay debajo (el usuario eligió este punto tras probar cinco niveles, del más
+     denso al más abierto; se quedó el más abierto). El brillo bajó
+     de 1.5 a 1.25 porque a 1.5 todo lo de debajo se lavaba a blanco y en claro el
+     cristal «no se notaba». El precio, como en oscuro, lo paga el caso extremo:
+     con un plano NEGRO debajo el texto secundario (#2a333c) queda en 4.2:1 (el
+     primario en 5.1); sobre la tinta del kit, 5.1; contra el fondo del kit y
+     contra un gris medio, ambos pasan de 7:1. */
+  --netzi-float-filter: saturate(200%) contrast(0.6) brightness(1.25) blur(10px);
+  /* El texto sube un nivel con el cristal, en TODA la página y no solo dentro de
+     las capas. Va aquí, en el mismo elemento que `data-theme`, y con literales:
+     declararlo en cada capa como `var(--netzi-float-text-2)` NO se reinvalidaba
+     al cambiar de tema en caliente y el sidebar se quedaba con el color del tema
+     anterior (medido: 3.08:1 tras pulsar el interruptor). En una superficie
+     opaca el refuerzo tampoco estorba: sube de 4.84 a 7.94. */
+  --netzi-text-2: #2a333c;
+  --netzi-text-3: #5c6b78;
+  /* --- LENTE del canto (opt-in: `data-glass-lens="on"`) ---
+     Un anillo con su PROPIO desenfoque, más fuerte que el del interior, para que
+     el canto parezca tener espesor. No es refracción de verdad —el fondo no se
+     curva— porque eso hoy no se puede: Chromium acepta
+     `backdrop-filter: url(#filtro-svg)` y luego lo IGNORA (comprobado: el mismo
+     filtro como `filter` normal sí deforma), y Safari ni lo acepta.
+     La cadena sale de destripar una implementación que sí convence (tonnitools):
+     lo que parece refracción es `invert()` + `contrast()` alto en un anillo
+     ESTRECHO del canto. Ellos apilan siete capas de `backdrop-filter` para
+     conseguirlo; aquí va una sola, porque cada capa cuesta frames.
+     ⚠️ Cuesta caro: es una segunda capa de `backdrop-filter`. Con una sola capa
+     en pantalla sale gratis (60 fps medidos); apilada con el shell cae a ~26.
+     Por eso es opt-in y por eso el shell se apaga cuando hay una capa encima. */
+  --netzi-float-lens: blur(18px) invert(0.18) brightness(1.1) saturate(1.3) hue-rotate(-10deg)
+    contrast(2);
+  --netzi-float-lens-size: 5px;
+
+  /* Filo especular, con GROSOR: luz en el canto de arriba y sombra dentro del de
+     abajo. Un solo filo de luz se lee como un velo iluminado; los dos juntos dan
+     el canto de una pieza de vidrio, que es la diferencia entre «translúcido» y
+     «cristal». No toca ni el alfa ni el filtro, así que no mueve el contraste. */
+  --netzi-float-glow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(11, 22, 34, 0.07);
+}
+
+[data-theme='dark'][data-glass='on'] {
+  --netzi-float-bg: rgba(22, 27, 34, 0.12);
+  --netzi-float-border: rgba(255, 255, 255, 0.14);
+  --netzi-float-border-2: rgba(255, 255, 255, 0.22);
+  /* En oscuro los tintes van hacia el negro, que aquí además MEJORA el
+     contraste del texto claro. */
+  --netzi-float-surface: rgba(0, 0, 0, 0.12);
+  --netzi-float-surface-2: rgba(0, 0, 0, 0.22);
+  --netzi-float-surface-3: rgba(0, 0, 0, 0.32);
+  /* Alfa 0.12, brillo 0.56 y 10 px de desenfoque (el usuario eligió este punto
+     tras probar cinco niveles; se quedó el más abierto). El alfa es lo que deja
+     pasar el COLOR de debajo; el brillo lo topa el contraste: el texto primario
+     tiene que quedar en 4.5:1 con un plano BLANCO debajo (5.1 aquí) y el
+     secundario, subido dos niveles (#d8dee6), en 3:1 (4.1). Sobre el fondo del
+     kit y sobre un gris medio (una tarjeta clara o una foto) los tres siguen
+     holgados. Los números los fija `tokens-contrast.spec.ts`. */
+  --netzi-float-filter: saturate(200%) contrast(0.6) brightness(0.56) blur(10px);
+  --netzi-text-2: #d8dee6;
+  --netzi-text-3: #aab4bf;
+  /* En oscuro la sombra del canto inferior es más marcada: sobre fondo oscuro una
+     línea negra se pierde, y sin ella el canto vuelve a no tener grosor. */
+  --netzi-float-glow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
+  /* El velo también se hunde en oscuro: el mismo alfa sobre un fondo ya oscuro
+     apenas separa la capa del contenido. */
+  --netzi-scrim: rgba(2, 5, 10, 0.45);
+  /* En oscuro se invierte menos: sobre fondo oscuro, invertir de más convierte el
+     canto en un halo blanco. */
+  --netzi-float-lens: blur(18px) invert(0.12) brightness(1.05) saturate(1.3) hue-rotate(-10deg)
+    contrast(1.7);
+}
+
+/* ===========================================================
+   FONDO AMBIENTAL (`data-ambient="on"`, lo pone `NetziThemeService`)
+   Manchas de color suaves DEBAJO del contenido, que el layout pinta bajo
+   `--netzi-bg`. Es lo que le da al cristal algo que desenfocar: sobre un fondo
+   liso, un panel translúcido se ve como una placa gris; sobre esto, como
+   vidrio. Va con los colores del preset (`--netzi-primary`) y dos de marca.
+   Los porcentajes son bajos a propósito: el texto se sigue leyendo encima
+   (medido: `--netzi-text-3` sobre la mancha más fuerte, 4.4:1 en claro y 4.6:1
+   en oscuro, por encima del 3:1 que exige). En alto contraste se apaga.
+   =========================================================== */
+:root {
+  --netzi-ambient: none;
+}
+
+[data-ambient='on'] {
+  --netzi-ambient:
+    radial-gradient(
+      55% 45% at 8% 0%,
+      color-mix(in srgb, var(--netzi-primary) 16%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      45% 40% at 100% 100%,
+      color-mix(in srgb, var(--netzi-purple) 12%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      35% 30% at 70% 10%,
+      color-mix(in srgb, var(--netzi-green) 8%, transparent),
+      transparent 70%
+    );
+}
+
+[data-theme='dark'][data-ambient='on'] {
+  --netzi-ambient:
+    radial-gradient(
+      55% 45% at 8% 0%,
+      color-mix(in srgb, var(--netzi-primary) 22%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      45% 40% at 100% 100%,
+      color-mix(in srgb, var(--netzi-purple) 18%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      35% 30% at 70% 10%,
+      color-mix(in srgb, var(--netzi-green) 10%, transparent),
+      transparent 70%
+    );
+}
+
+/* En alto contraste no hay manchas: el fondo vuelve a ser liso. */
+[data-contrast='high'][data-ambient='on'] {
+  --netzi-ambient: none;
+}
+
+/* Quien pide menos transparencia recibe la superficie opaca de siempre, igual
+   que el kit ya respeta `prefers-reduced-motion` en las animaciones. */
+@media (prefers-reduced-transparency: reduce) {
+  [data-glass='on'] {
+    --netzi-float-bg: #ffffff;
+    --netzi-float-border: #eaedf0;
+    --netzi-float-border-2: #dce0e5;
+    --netzi-float-surface: #ffffff;
+    --netzi-float-surface-2: #f4f6f8;
+    --netzi-float-surface-3: #eef1f4;
+    --netzi-float-filter: none;
+    --netzi-float-glow: 0 0 rgba(0, 0, 0, 0);
+    --netzi-scrim-filter: none;
+  }
+
+  [data-theme='dark'][data-glass='on'] {
+    --netzi-float-bg: #161b22;
+    --netzi-float-border: #21262d;
+    --netzi-float-border-2: #30363d;
+    --netzi-float-surface: #161b22;
+    --netzi-float-surface-2: #0d1117;
+    --netzi-float-surface-3: #21262d;
+  }
+}
+
+/* Sin `backdrop-filter` no hay desenfoque, y una capa translúcida sin desenfocar
+   lo que hay debajo es texto sobre ruido: se degrada a opaco entero. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  [data-glass='on'] {
+    --netzi-float-bg: #ffffff;
+    --netzi-float-border: #eaedf0;
+    --netzi-float-border-2: #dce0e5;
+    --netzi-float-surface: #ffffff;
+    --netzi-float-surface-2: #f4f6f8;
+    --netzi-float-surface-3: #eef1f4;
+  }
+
+  [data-theme='dark'][data-glass='on'] {
+    --netzi-float-bg: #161b22;
+    --netzi-float-border: #21262d;
+    --netzi-float-border-2: #30363d;
+    --netzi-float-surface: #161b22;
+    --netzi-float-surface-2: #0d1117;
+    --netzi-float-surface-3: #21262d;
+  }
+}
+
+/* ===========================================================
+   DENSIDAD compacta: controles y radios más ajustados
+   =========================================================== */
+[data-density='compact'] {
+  --netzi-control-py: 8px;
+  --netzi-control-px: 11px;
+  --netzi-control-h-sm: calc(32px * var(--netzi-font-scale, 1));
+  --netzi-control-h-md: calc(40px * var(--netzi-font-scale, 1));
+  --netzi-control-h-lg: calc(46px * var(--netzi-font-scale, 1));
+  --netzi-control-px-sm: 10px;
+  --netzi-control-px-md: 11px;
+  --netzi-control-px-lg: 13px;
+  --netzi-radius-sm: 5px;
+  --netzi-radius: 6px;
+  --netzi-radius-lg: 8px;
+  /* Espaciado más ajustado (pasos medios/grandes; los finos no cambian). */
+  --netzi-space-4: 10px;
+  --netzi-space-5: 12px;
+  --netzi-space-6: 20px;
+  --netzi-space-7: 28px;
+  --netzi-space-8: 40px;
+}
+
+/* ===========================================================
+   TEXTO: para qué sirve cada nivel y cuánto contrasta
+
+   Ratios WCAG 2.1 medidos contra las cuatro superficies del tema (bg, surface,
+   surface-2 y surface-3); se anota el PEOR de los cuatro, que siempre es
+   surface-3. Los verifica `tokens-contrast.spec.ts` en @netzi/ui, así que si
+   alguien cambia un valor aquí y deja de cumplir, la suite se pone roja.
+
+   Mínimos que se aplican
+     texto normal      4.5:1   (SC 1.4.3)
+     no textual        3:1     (SC 1.4.11, iconos y bordes con significado)
+     deshabilitado     exento  (SC 1.4.3 no cubre componentes inactivos)
+
+   nivel    claro                oscuro               para qué
+   text     #1c252e  13.69       #ffffff  15.22       texto principal
+   text-2   #5c6b78   4.84       #8b949e   4.95       TODO texto secundario
+   text-3   #7a8996   3.17       #6e7681   3.31       NO textual, ver abajo
+
+   Con alto contraste
+   text-2   #45525e   7.07       #aab4bf   7.24
+   text-3   #5c6b78   4.84       #8b949e   4.95
+
+   `text-3` NO vale para texto legible. Es el tono de lo que acompaña: chevrons,
+   separadores, iconos decorativos, la barra de redimensionar, el brillo del
+   esqueleto de carga y los estados deshabilitados. Para un rótulo, una ayuda, un
+   pie, un metadato o un placeholder va SIEMPRE `text-2`. La regla existe porque
+   con 45 archivos usándolo indistintamente el kit entero se quedó por debajo del
+   mínimo sin que nadie lo notara.
+   =========================================================== */