@studiolxd/brand 38.12.4

package/src/tokens/molecules/carousel.ts

@@ -0,0 +1,7 @@
+import carousel from '../../../tokens/molecule/carousel.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(carousel as never);
+
+export const carouselTokens     = all.filter(t => !t.name.includes('-surface-dark-'));
+export const carouselDarkTokens = all.filter(t => t.name.includes('-surface-dark-'));

package/src/tokens/molecules/chart.css

@@ -0,0 +1,123 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --chart-bar-thickness-max: 1.5rem; /** 24px — la barra nunca llena su banda; el sobrante es aire */
+  --chart-bar-radius: 0.25rem; /** 4px — extremo de dato redondeado; el extremo de la línea base queda recto */
+  --chart-area-fill-opacity: 0.1; /** El área es un velo del tono de la serie, nunca un bloque saturado */
+  --chart-donut-thickness: 0.55; /** Fracción del radio que ocupa el anillo del donut */
+  --chart-radar-fill-opacity: 0.15; /** El polígono del radar es un velo del tono de la serie, como el área */
+  --chart-height: 16rem; /** 256px — alto por defecto del área de dibujo. La banda del eje X va aparte: el contenedor crece con ella y nunca aparece un scroll anidado */
+  --chart-hover-opacity: 0.75; /** Atenuación de las marcas que no son la activa mientras el puntero está encima */
+  --chart-series-1: var(--color-chart-series-1); /** Ranura categórica 1. El orden de las ranuras es el mecanismo de seguridad para daltonismo: se asignan en orden, nunca se ciclan */
+  --chart-series-2: var(--color-chart-series-2); /** Ranura categórica 2 */
+  --chart-series-3: var(--color-chart-series-3); /** Ranura categórica 3 */
+  --chart-series-4: var(--color-chart-series-4); /** Ranura categórica 4 */
+  --chart-series-5: var(--color-chart-series-5); /** Ranura categórica 5 */
+  --chart-series-6: var(--color-chart-series-6); /** Ranura categórica 6 */
+  --chart-series-7: var(--color-chart-series-7); /** Ranura categórica 7 */
+  --chart-series-8: var(--color-chart-series-8); /** Ranura categórica 8 — techo. Una novena serie se pliega en «Otros» o se factoriza en múltiplos pequeños */
+  --chart-sequential-100: var(--color-chart-sequential-100); /** Rampa secuencial (magnitud) — mínimo */
+  --chart-sequential-200: var(--color-chart-sequential-200); /** Rampa secuencial — paso 200 */
+  --chart-sequential-300: var(--color-chart-sequential-300); /** Rampa secuencial — paso 300; extremo claro de una rampa ordinal */
+  --chart-sequential-400: var(--color-chart-sequential-400); /** Rampa secuencial — paso 400 */
+  --chart-sequential-500: var(--color-chart-sequential-500); /** Rampa secuencial — paso 500 */
+  --chart-sequential-600: var(--color-chart-sequential-600); /** Rampa secuencial — paso 600 */
+  --chart-sequential-700: var(--color-chart-sequential-700); /** Rampa secuencial — máximo */
+  --chart-diverging-warm-1: var(--color-chart-diverging-warm-1); /** Divergente, brazo cálido junto al neutro */
+  --chart-diverging-warm-2: var(--color-chart-diverging-warm-2); /** Divergente, brazo cálido intermedio */
+  --chart-diverging-warm-3: var(--color-chart-diverging-warm-3); /** Divergente, brazo cálido extremo */
+  --chart-diverging-cool-1: var(--color-chart-diverging-cool-1); /** Divergente, brazo frío junto al neutro */
+  --chart-diverging-cool-2: var(--color-chart-diverging-cool-2); /** Divergente, brazo frío intermedio */
+  --chart-diverging-cool-3: var(--color-chart-diverging-cool-3); /** Divergente, brazo frío extremo */
+  --chart-label-font-family: var(--font-family-sans); /** Tipografía de los rótulos */
+  --chart-label-font-size: var(--font-size-1); /** 14px — rótulo de interfaz */
+  --chart-label-font-weight: var(--font-weight-regular); /** Peso de los rótulos de eje */
+  --chart-marker-size: var(--spacing-2); /** 8px de diámetro — punto de serie y marcador de extremo */
+  --chart-funnel-gap: var(--spacing-1); /** 4px — hueco de superficie entre tramos del embudo */
+  --chart-radial-bar-gap: var(--spacing-1); /** 4px — hueco entre anillos de la barra radial */
+  --chart-dot-size: var(--spacing-3); /** 10px de diámetro nominal — punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate */
+  --chart-tile-label-color-1: var(--color-black); /** Rótulo sobre la baldosa de la ranura 1. La tinta se elige por ranura: ninguna de las dos (blanco o negro) llega a 4.5:1 sobre las ocho series, así que cada una lleva la que cumple. Negro, no prusia: el prusia es un casi-negro entintado y se queda corto sobre el azul de la ranura 1 */
+  --chart-tile-label-color-2: var(--color-black); /** Rótulo sobre la baldosa de la ranura 2 */
+  --chart-tile-label-color-3: var(--color-black); /** Rótulo sobre la baldosa de la ranura 3 */
+  --chart-tile-label-color-4: var(--color-black); /** Rótulo sobre la baldosa de la ranura 4 */
+  --chart-tile-label-color-6: var(--color-black); /** Rótulo sobre la baldosa de la ranura 6 */
+  --chart-tile-label-color-8: var(--color-black); /** Rótulo sobre la baldosa de la ranura 8 */
+  --chart-padding-block: var(--spacing-2); /** Aire vertical del área de dibujo */
+  --chart-padding-inline: var(--spacing-2); /** Aire horizontal del área de dibujo */
+  --chart-axis-gap: var(--spacing-2); /** Separación entre el eje y sus rótulos */
+  --chart-block-gap: var(--spacing-3); /** Separación entre título, lienzo y leyenda */
+  --chart-legend-gap: var(--spacing-2); /** Aire entre las piezas de la leyenda */
+  --chart-legend-swatch-size: var(--spacing-2); /** 8px — lado de la muestra de color de la leyenda */
+  --chart-legend-swatch-line-width: var(--spacing-3); /** 12px — largo de la muestra cuando la marca es una línea: la leyenda imita la marca */
+  --chart-tooltip-row-gap: var(--spacing-1); /** Aire entre las filas del bocadillo */
+  --chart-tooltip-max-width: var(--tooltip-max-width); /** Ancho máximo del bocadillo */
+  --chart-transition-duration: var(--motion-duration-fast); /** Respuesta de la marca al puntero. Con `prefers-reduced-motion` no hay transición */
+  --chart-transition-easing: var(--motion-easing-out); /** Curva de la respuesta al puntero */
+  --chart-diverging-neutral: var(--color-surface-secondary-on-light); /** Punto medio divergente: gris neutro. Nunca un tono — el medio tiene que leerse como «nada». Es el único dato que se viste con un rol de SUPERFICIE, y a propósito: el cero es el punto de MENOR saliencia de la rampa, así que su trabajo es retirarse hacia el lienzo, no contrastar con él. Sobre blanco queda en 1,12:1, por debajo de los seis pasos de los dos brazos (2,49:1 el más flojo) */
+  --chart-surface: var(--color-background-light); /** Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato */
+  --chart-grid-color: var(--color-border-default-on-light); /** Rejilla: filete de 1px a un paso de la superficie. Cromo recesivo */
+  --chart-grid-width: var(--border-width-default); /** Grosor de la rejilla. Sólida siempre: una rejilla discontinua se lee como umbral */
+  --chart-axis-color: var(--color-icon-secondary-on-light); /** Línea base y eje: un paso más firme que la rejilla, porque es el ancla del cero */
+  --chart-axis-width: var(--border-width-default); /** Grosor del eje */
+  --chart-label-color: var(--color-text-muted-on-light); /** Rótulos de eje y de valor. El texto nunca lleva el color de la serie: la identidad la trae la marca de color que va al lado */
+  --chart-value-font-weight: var(--font-weight-emphasis); /** Peso de la etiqueta directa de valor: la cifra es lo que se lee */
+  --chart-muted-color: var(--color-icon-secondary-on-light); /** Serie apagada del patrón de énfasis (una serie en color, el resto en gris) y ranura «Otros» */
+  --chart-line-width: var(--border-width-focus); /** 2px — grosor de la línea de serie */
+  --chart-marker-ring-width: var(--border-width-focus); /** 2px — anillo del color de la superficie alrededor del punto, para que siga legible al cruzarse con una línea */
+  --chart-mark-gap: var(--border-width-focus); /** 2px — hueco de superficie entre marcas que se tocan: segmentos de una barra apilada y barras contiguas */
+  --chart-treemap-gap: var(--border-width-focus); /** 2px — hueco entre baldosas del treemap */
+  --chart-radial-track-color: var(--color-icon-secondary-on-light); /** Carril del anillo sin recorrer en la barra radial: es la geometría de referencia del dato, como el eje, así que lleva su misma tinta (≥3:1 contra la superficie, WCAG 1.4.11) */
+  --chart-tile-label-color: var(--color-text-on-dark); /** Rótulo sobre una baldosa del treemap cuando el relleno lo elige el producto (`color`/`colors`): va encima del relleno de la serie, no de la superficie, y con un color desconocido el sistema no puede elegir la tinta */
+  --chart-tile-label-color-5: var(--color-text-on-dark); /** Rótulo sobre la baldosa de la ranura 5 — el magenta es lo bastante oscuro para llevar tinta clara */
+  --chart-tile-label-color-7: var(--color-text-on-dark); /** Rótulo sobre la baldosa de la ranura 7 — la lavanda de gráfico es la más oscura de las ocho */
+  --chart-tile-label-color-muted: var(--color-text-on-dark); /** Rótulo sobre la baldosa gris de «Otros» (pasada la octava ranura) */
+  --chart-tooltip-padding-block: var(--tooltip-padding-block); /** Padding vertical del bocadillo */
+  --chart-tooltip-padding-inline: var(--tooltip-padding-inline); /** Padding horizontal del bocadillo */
+  --chart-tooltip-font-size: var(--tooltip-font-size); /** Tamaño de texto del bocadillo */
+  --chart-tooltip-line-height: var(--tooltip-line-height); /** Interlineado del bocadillo */
+  --chart-tooltip-offset: var(--tooltip-offset); /** Separación entre el punto activo y el bocadillo */
+  --chart-crosshair-color: var(--color-icon-secondary-on-light); /** Filete vertical que sigue al puntero y se engancha a la posición de dato más cercana */
+  --chart-tooltip-bg: var(--tooltip-bg); /** Bocadillo del gráfico: los mismos tokens que Tooltip, para que no haya dos bocadillos distintos en el sistema */
+  --chart-tooltip-color: var(--tooltip-color); /** Texto del bocadillo */
+  --chart-tooltip-border-radius: var(--tooltip-border-radius); /** Radio del bocadillo */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --chart-tile-label-color-muted: var(--color-black); /** Rótulo de «Otros» — surface-dark: el gris de atenuación en oscuro es claro */
+  --chart-tile-label-color-5: var(--color-black); /** Rótulo de la ranura 5 — surface-dark: el paso de serie para superficie oscura es más claro y ya no aguanta tinta blanca */
+  --chart-tile-label-color-7: var(--color-black); /** Rótulo de la ranura 7 — surface-dark */
+  --chart-series-1: var(--color-chart-series-1-on-dark); /** Ranura 1 — surface-dark */
+  --chart-series-2: var(--color-chart-series-2-on-dark); /** Ranura 2 — surface-dark */
+  --chart-series-3: var(--color-chart-series-3-on-dark); /** Ranura 3 — surface-dark */
+  --chart-series-4: var(--color-chart-series-4-on-dark); /** Ranura 4 — surface-dark */
+  --chart-series-5: var(--color-chart-series-5-on-dark); /** Ranura 5 — surface-dark */
+  --chart-series-6: var(--color-chart-series-6-on-dark); /** Ranura 6 — surface-dark */
+  --chart-series-7: var(--color-chart-series-7-on-dark); /** Ranura 7 — surface-dark */
+  --chart-series-8: var(--color-chart-series-8-on-dark); /** Ranura 8 — surface-dark */
+  --chart-sequential-100: var(--color-chart-sequential-100-on-dark); /** Rampa secuencial mínimo — surface-dark. El ancla se invierte: el paso que se retira hacia la superficie es el oscuro */
+  --chart-sequential-200: var(--color-chart-sequential-200-on-dark); /** Rampa secuencial 200 — surface-dark */
+  --chart-sequential-300: var(--color-chart-sequential-300-on-dark); /** Rampa secuencial 300 — surface-dark */
+  --chart-sequential-400: var(--color-chart-sequential-400-on-dark); /** Rampa secuencial 400 — surface-dark */
+  --chart-sequential-500: var(--color-chart-sequential-500-on-dark); /** Rampa secuencial 500 — surface-dark */
+  --chart-sequential-600: var(--color-chart-sequential-600-on-dark); /** Rampa secuencial 600 — surface-dark */
+  --chart-sequential-700: var(--color-chart-sequential-700-on-dark); /** Rampa secuencial máximo — surface-dark */
+  --chart-diverging-warm-1: var(--color-chart-diverging-warm-1-on-dark); /** Divergente cálido 1 — surface-dark */
+  --chart-diverging-warm-2: var(--color-chart-diverging-warm-2-on-dark); /** Divergente cálido 2 — surface-dark */
+  --chart-diverging-warm-3: var(--color-chart-diverging-warm-3-on-dark); /** Divergente cálido 3 — surface-dark */
+  --chart-diverging-cool-1: var(--color-chart-diverging-cool-1-on-dark); /** Divergente frío 1 — surface-dark */
+  --chart-diverging-cool-2: var(--color-chart-diverging-cool-2-on-dark); /** Divergente frío 2 — surface-dark */
+  --chart-diverging-cool-3: var(--color-chart-diverging-cool-3-on-dark); /** Divergente frío 3 — surface-dark */
+  --chart-radial-track-color: var(--color-disabled-border-on-dark); /** Carril del anillo — surface-dark. La misma tinta que el eje en oscuro, por el mismo motivo */
+  --chart-surface: var(--color-background-dark); /** Hueco y anillo — surface-dark */
+  --chart-grid-color: var(--color-border-recessive-on-dark); /** Rejilla — surface-dark. Excepción declarada a la regla de derivación (borde → `text.on-dark`): la rejilla es cromo recesivo, no un borde con peso de dato; en blanco sobre prusia se leería como tinta. Procedencia corregida: apuntaba a `color.surface.secondary-on-dark`, un token de SUPERFICIE (el mismo defecto de origen que hizo invisible el carril del Stepper) — ahora apunta a `color.border.recessive-on-dark`, un token de LÍNEA, con el mismo `grey-darkest` y por tanto el mismo valor visual */
+  --chart-axis-color: var(--color-disabled-border-on-dark); /** Eje — surface-dark: un paso por encima de la rejilla, igual que en claro. Excepción declarada como `grid-color`: mismo `grey-dark` que en claro, no el `text.muted-on-dark` de `axis-color` */
+  --chart-label-color: var(--color-text-muted-on-dark); /** Rótulos — surface-dark */
+  --chart-muted-color: var(--color-text-muted-on-dark); /** Serie apagada — surface-dark */
+  --chart-crosshair-color: var(--color-text-muted-on-dark); /** Filete del puntero — surface-dark */
+  --chart-diverging-neutral: var(--color-surface-secondary-on-dark); /** Punto medio divergente — surface-dark. No basta con invertir el gris: sobre prusia, el gris claro de la superficie clara sería el color MÁS brillante de la escala y el cero gritaría más que los extremos. La superficie secundaria oscura mantiene el criterio: 1,89:1 sobre el lienzo, el mínimo de la rampa (el paso más flojo de los brazos es 3,26:1). Y sigue sin confundirse ni con el fondo (1,89:1 es una mancha visible; el neutro claro está más cerca de su lienzo, a 1,12:1) ni con la serie apagada de «Otros» (5,75:1 entre los dos) */
+}

package/src/tokens/molecules/chart.ts

@@ -0,0 +1,4 @@
+import chart from '../../../tokens/organism/chart.json';
+import { flattenTokens } from '../utils';
+
+export const chartTokens = flattenTokens(chart as never);

package/src/tokens/molecules/chat-shell.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --chat-shell-list-width: var(--sidebar-width); /** Ancho de la columna de conversaciones — cascada desde `sidebar`, que es donde suele vivir esa columna dentro de una aplicación */
+  --chat-shell-gap: var(--spacing-6); /** El aire entre la columna de conversaciones y el hilo. Lo pone el contenedor, no los hijos: el armazón no tiene ningún relleno propio, así que esta es la única medida de espaciado que aporta y la única que separa las dos columnas — ya no hay línea ni pasillo que lo haga */
+  --chat-shell-header-gap: var(--spacing-3); /** Separación entre lo que va en la cabecera del hilo */
+  --chat-shell-thread-padding-block: var(--spacing-4); /** Aire del hilo por arriba y por abajo, en la ranura del armazón. Arriba separa el primer globo de la cabecera —el selector de modelo— y abajo el último de la caja de escribir: la columna del chat no tiene `gap`, así que sin esta medida los tres bloques se tocan. Va en el envoltorio y no dentro del hilo a propósito: ahí queda fuera del desplazamiento y el pasillo no se va con el scroll, que es lo que deja la cabecera siempre despejada */
+  --chat-shell-breakpoint: var(--breakpoint-lg); /** Donde el armazón pasa de dos columnas a una. El mismo punto en el que el chrome de aplicación pasa de barra superior a barra lateral */
+  --chat-shell-thread-padding-inline: calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)); /** Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire */
+  --chat-shell-bg: var(--color-background-light); /** Fondo del armazón */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --chat-shell-bg: var(--color-background-dark); /** Fondo del armazón — superficie oscura */
+}

package/src/tokens/molecules/checkbox-field.css

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --checkbox-field-checkbox-offset: 3px; /** Desplazamiento vertical del checkbox para alinearlo con la primera línea de texto */
+  --checkbox-field-cursor: pointer; /** Cursor */
+  --checkbox-field-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --checkbox-field-stack-gap: var(--spacing-2); /** Espacio entre el checkbox, la ayuda y el error — el ritmo del resto de campos */
+  --checkbox-field-gap: var(--spacing-3); /** Separación entre el checkbox y el texto */
+  --checkbox-field-sm-gap: var(--spacing-2); /** Gap — variante sm */
+  --checkbox-field-sm-padding-block: var(--spacing-2); /** Padding block — variante sm */
+  --checkbox-field-lg-gap: var(--spacing-4); /** Gap — variante lg */
+  --checkbox-field-lg-padding-block: var(--spacing-5); /** Padding block — variante lg */
+  --checkbox-field-padding-block: var(--control-padding-block); /** Padding block — hereda de control */
+  --checkbox-field-sm-label-font-size: var(--label-sm-font-size); /** Cuerpo del texto — variante sm: un peldaño por debajo del cuerpo de la superficie */
+  --checkbox-field-lg-label-font-size: var(--label-lg-font-size); /** Tamaño de la etiqueta en lg — el del Label lg (no el párrafo large, que en superficie pública crece con la prosa) */
+  --checkbox-field-label-font-family: var(--text-font-family); /** Familia tipográfica */
+  --checkbox-field-label-font-size: var(--text-font-size); /** Es texto corriente: el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --checkbox-field-label-line-height: var(--text-line-height); /** Interlineado */
+  --checkbox-field-label-letter-spacing: var(--text-letter-spacing); /** Interletraje */
+  --checkbox-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --checkbox-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --checkbox-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --checkbox-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --checkbox-field-label-font-weight: var(--text-font-weight); /** Peso tipográfico */
+  --checkbox-field-label-color: var(--text-color); /** Color del texto */
+  --checkbox-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --checkbox-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --checkbox-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --checkbox-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --checkbox-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --checkbox-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --checkbox-field-label-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
+  --checkbox-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --checkbox-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/checkbox-field.ts

@@ -0,0 +1,9 @@
+import checkboxField from '../../../tokens/molecule/checkbox-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(checkboxField as never);
+
+export const checkboxFieldErrorTokens  = all.filter(t => t.name.startsWith('--checkbox-field-error-') || t.name.startsWith('--checkbox-field-surface-dark-error-'));
+export const checkboxFieldHelperTokens = all.filter(t => t.name.startsWith('--checkbox-field-helper-'));
+export const checkboxFieldLabelTokens  = all.filter(t => t.name.includes('-label-'));
+export const checkboxFieldBaseTokens   = all.filter(t => !t.name.startsWith('--checkbox-field-error-') && !t.name.startsWith('--checkbox-field-helper-') && !t.name.includes('-label-'));

package/src/tokens/molecules/command-palette.css

@@ -0,0 +1,50 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --command-palette-max-height: min(24rem, 60vh); /** Alto máximo de la paleta — la lista scrollea dentro */
+  --command-palette-input-padding-block: var(--spacing-3); /** Padding vertical del buscador */
+  --command-palette-input-padding-inline: var(--spacing-2); /** Padding horizontal del buscador */
+  --command-palette-input-font-size: var(--font-size-3); /** Tamaño de texto del buscador */
+  --command-palette-list-padding-block: var(--spacing-1); /** Padding vertical de la lista de resultados */
+  --command-palette-list-padding-inline: var(--spacing-1); /** Padding horizontal de la lista de resultados */
+  --command-palette-empty-padding-block: var(--spacing-6); /** Padding vertical del estado vacío */
+  --command-palette-empty-padding-inline: var(--spacing-4); /** Padding horizontal del estado vacío */
+  --command-palette-empty-font-size: var(--font-size-2); /** Tamaño de texto del estado vacío */
+  --command-palette-heading-padding-block: var(--spacing-2); /** Padding vertical del título de grupo */
+  --command-palette-heading-padding-inline: var(--spacing-3); /** Padding horizontal del título de grupo */
+  --command-palette-heading-font-size: var(--font-size-1); /** Tamaño de texto del título de grupo */
+  --command-palette-item-padding-block: var(--spacing-2); /** Padding vertical de cada ítem */
+  --command-palette-item-padding-inline: var(--spacing-3); /** Padding horizontal de cada ítem */
+  --command-palette-item-gap: var(--spacing-2); /** Gap entre icono y texto del ítem */
+  --command-palette-item-font-size: var(--font-size-2); /** Tamaño de texto de los ítems */
+  --command-palette-item-icon-size: var(--font-size-4); /** Talla del icono de los ítems */
+  --command-palette-input-border-width: var(--border-width-default); /** Grosor de la línea bajo el buscador */
+  --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light); /** Color del placeholder del buscador */
+  --command-palette-input-focus-ring-color: var(--color-primary); /** Color del anillo de foco del buscador */
+  --command-palette-input-focus-border-color: var(--color-primary); /** Color de la línea bajo el buscador con el foco puesto */
+  --command-palette-empty-color: var(--color-text-muted-on-light); /** Color del estado vacío */
+  --command-palette-heading-font-weight: var(--font-weight-emphasis); /** Peso del título de grupo */
+  --command-palette-heading-color: var(--color-text-muted-on-light); /** Color del título de grupo */
+  --command-palette-item-border-radius: var(--border-radius-default); /** Radio de cada ítem */
+  --command-palette-input-border-color: var(--floating-panel-border-color); /** Color de la línea bajo el buscador */
+  --command-palette-input-focus-ring-width: var(--control-focus-ring-width); /** Grosor del anillo de foco del buscador — el del sistema */
+  --command-palette-item-color: var(--menu-item-color); /** Color de texto de los ítems — comparte lenguaje con ContextMenu */
+  --command-palette-item-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del ítem resaltado — el del Menu: la inversión de marca */
+  --command-palette-item-highlighted-color: var(--menu-item-highlighted-color); /** Texto del ítem resaltado — el del Menu: icono y atajo lo heredan por `currentColor` */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --command-palette-empty-color: var(--color-text-muted-on-dark); /** Color del estado vacío — surface-dark */
+  --command-palette-heading-color: var(--color-text-muted-on-dark); /** Color del título de grupo — surface-dark */
+  --command-palette-input-placeholder-color: var(--color-text-placeholder-on-dark); /** Pista del buscador — surface-dark */
+  --command-palette-input-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del buscador — surface-dark */
+  --command-palette-input-focus-border-color: var(--color-text-on-dark); /** Línea bajo el buscador con el foco puesto — surface-dark */
+  --command-palette-item-color: var(--menu-item-color); /** Color de texto de los ítems — surface-dark */
+  --command-palette-item-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del ítem resaltado — surface-dark */
+  --command-palette-item-highlighted-color: var(--menu-item-highlighted-color); /** Texto del ítem resaltado — surface-dark */
+}

package/src/tokens/molecules/command-palette.ts

@@ -0,0 +1,7 @@
+import commandPalette from '../../../tokens/molecule/command-palette.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(commandPalette as never);
+
+export const commandPaletteBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const commandPaletteDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/confirm-dialog.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --confirm-dialog-actions-space-before: var(--spacing-5); /** Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto */
+}

package/src/tokens/molecules/confirm-dialog.ts

@@ -0,0 +1,4 @@
+import confirmDialog from '../../../tokens/molecule/confirm-dialog.json';
+import { flattenTokens } from '../utils';
+
+export const confirmDialogTokens = flattenTokens(confirmDialog as never);

package/src/tokens/molecules/connector-auth.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --connector-auth-untrusted-max-lines: 3; /** Cuántas líneas se ve de un valor de fuera —nombre de herramienta, cuenta, host— antes de recortarlo. Tres: bastantes para leer un nombre normal entero, pocas para que un nombre de 300 caracteres no empuje la decisión fuera de la pantalla */
+  --connector-auth-untrusted-toggle-gap: var(--spacing-1); /** Aire entre el valor recortado y el desplegador que lo enseña entero */
+  --connector-auth-untrusted-toggle-cursor: var(--link-cursor); /** Cursor del desplegador — el del enlace, que es la cara que lleva */
+  --connector-auth-untrusted-toggle-font-size: var(--text-paragraph-small-font-size); /** Tamaño del desplegador: letra menor, porque no es el dato sino la manera de verlo entero */
+  --connector-auth-untrusted-focus-ring-width: var(--link-focus-ring-width); /** Grosor del anillo de foco del desplegador — el del enlace */
+  --connector-auth-untrusted-focus-ring-offset: var(--link-focus-ring-offset); /** Separación del anillo de foco — la del enlace */
+  --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color); /** Anillo de foco del desplegador — el del enlace, con su mismo par oscuro */
+}

package/src/tokens/molecules/consent.css

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --consent-banner-padding-block: var(--spacing-4); /** Aire vertical de la banda */
+  --consent-banner-padding-inline: var(--spacing-4); /** Aire horizontal de la banda */
+  --consent-banner-gap: var(--spacing-3); /** Separación entre el texto y la fila de botones */
+  --consent-banner-text-gap: var(--spacing-1); /** Separación entre el título y el texto */
+  --consent-banner-actions-gap: var(--spacing-2); /** Separación entre botones */
+  --consent-banner-z-index: var(--z-index-bar); /** Capa: la de las barras fijas de la aplicación. Por debajo del velo de un modal — el banner no bloquea nada */
+  --consent-preferences-gap: var(--spacing-4); /** Separación entre los bloques del panel */
+  --consent-preferences-category-gap: var(--spacing-3); /** Separación entre categorías de la lista */
+  --consent-banner-bg: var(--color-background-light); /** Fondo de la banda */
+  --consent-banner-color: var(--color-text-on-light); /** Texto de la banda */
+  --consent-banner-border-color: var(--color-primary); /** Línea superior que separa la banda de la página */
+  --consent-banner-border-width: var(--border-width-default); /** Grosor de la línea superior */
+  --consent-banner-max-inline-size: var(--container-max-width-xl); /** Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública */
+  --consent-banner-title-font-size: var(--text-size-3); /** Cuerpo del título de la banda */
+  --consent-banner-description-font-size: var(--text-font-size); /** Cuerpo del texto de la banda: el cuerpo de texto de la superficie, sin reducir (decisión del 2026-08-28) */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --consent-banner-bg: var(--color-background-dark); /** Fondo de la banda — surface-dark */
+  --consent-banner-color: var(--color-text-on-dark); /** Texto de la banda — surface-dark */
+  --consent-banner-border-color: var(--color-text-on-dark); /** Línea superior — surface-dark */
+}

package/src/tokens/molecules/consent.ts

@@ -0,0 +1,8 @@
+import consent from '../../../tokens/molecule/consent.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(consent as never);
+
+export const consentBannerTokens      = all.filter(t => t.name.startsWith('--consent-banner-') && !t.name.startsWith('--consent-banner-surface-dark-'));
+export const consentPreferencesTokens = all.filter(t => t.name.startsWith('--consent-preferences-') && !t.name.startsWith('--consent-preferences-surface-dark-'));
+export const consentDarkTokens        = all.filter(t => t.name.includes('-surface-dark-'));

package/src/tokens/molecules/conversation-list.css

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --conversation-list-delete-hover-bg: rgba(0, 0, 0, 0); /** Fondo del aspa bajo el puntero: ninguno. La fila del chat no se rellena en hover (regla de Colores), así que el aspa apaga el relleno de marca del `Button` ghost y se queda solo con el cambio de tinta */
+  --conversation-list-header-gap: var(--spacing-2); /** Separación entre el botón de conversación nueva y la lista */
+  --conversation-list-gap: var(--spacing-1); /** Separación entre conversaciones */
+  --conversation-list-padding-inline: var(--spacing-2); /** Aire horizontal de la lista dentro de la columna que la contiene */
+  --conversation-list-item-padding-block: var(--spacing-2); /** Aire vertical de cada conversación */
+  --conversation-list-item-padding-inline: var(--spacing-3); /** Aire horizontal de cada conversación */
+  --conversation-list-item-font-family: var(--font-family-sans); /** Familia tipográfica del título de la conversación */
+  --conversation-list-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
+  --conversation-list-transition-easing: var(--motion-easing-default); /** Curva de la transición de color */
+  --conversation-list-item-border-radius: var(--border-radius-default); /** Radio de cada conversación: recto, como todo el sistema */
+  --conversation-list-item-font-size: var(--text-font-size); /** El título es texto corriente: hereda el cuerpo de la superficie */
+  --conversation-list-item-color: var(--color-text-muted-on-light); /** Tinta de una conversación en reposo: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto) */
+  --conversation-list-item-hover-color: var(--color-text-on-light); /** Tinta de la conversación bajo el puntero: el hover no pinta relleno (regla de Colores), sube del gris de texto secundario a tinta plena */
+  --conversation-list-item-active-color: var(--color-text-on-light); /** Tinta de la conversación abierta: tinta plena. La conversación abierta se dice con tinta y peso, no con un fondo */
+  --conversation-list-item-active-font-weight: var(--font-weight-emphasis); /** Peso de la conversación abierta */
+  --conversation-list-delete-color: var(--color-icon-secondary-on-light); /** Tinta del aspa en reposo. Es un icono de acción secundaria — remapea `button.ghost.color` en el ámbito de la fila */
+  --conversation-list-delete-hover-color: var(--color-destructive-text-on-light); /** Tinta del aspa bajo el puntero */
+  --conversation-list-delete-focus-ring-offset: calc(-1 * var(--border-width-focus)); /** El anillo de foco del aspa va por dentro, como el del título de la fila: el aspa toca el canto de la fila y un anillo por fuera se saldría */
+  --conversation-list-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --conversation-list-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --conversation-list-item-color: var(--color-text-muted-on-dark); /** Tinta de una conversación en reposo — superficie oscura */
+  --conversation-list-item-hover-color: var(--color-text-on-dark); /** Tinta de la conversación bajo el puntero — superficie oscura: tinta plena */
+  --conversation-list-item-active-color: var(--color-text-on-dark); /** Tinta de la conversación abierta — superficie oscura: tinta plena, el par por la regla de derivación del valor claro. La abierta se dice con tinta y peso, no con un color de marca: coincide con el hover igual que en claro, y quien la distingue del resto es el peso (`item-active-font-weight`) sobre el gris de reposo */
+  --conversation-list-delete-color: var(--color-text-muted-on-dark); /** Tinta del aspa en reposo — superficie oscura */
+  --conversation-list-delete-hover-color: var(--color-destructive-text-on-dark); /** Tinta del aspa bajo el puntero — superficie oscura */
+  --conversation-list-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — superficie oscura */
+}

package/src/tokens/molecules/conversation-thread.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --conversation-thread-gap: var(--spacing-4); /** Separación vertical entre mensajes. Es la única medida de espaciado del hilo: el relleno se retiró —quien compone, espacia—, así que el aire alrededor de los globos lo pone quien monta el hilo */
+}

package/src/tokens/molecules/copy-button.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --copy-button-gap: var(--spacing-2); /** Aire entre el icono y el texto cuando el botón lleva rótulo visible. Es el mismo aire que el icono de un `Link` */
+}

package/src/tokens/molecules/copy-button.ts

@@ -0,0 +1,4 @@
+import copyButton from '../../../tokens/molecule/copy-button.json';
+import { flattenTokens } from '../utils';
+
+export const copyButtonTokens = flattenTokens(copyButton as never);

package/src/tokens/molecules/data-table.css

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --data-table-block-gap: var(--spacing-4); /** Separación entre buscador, tabla y paginación — corta, es un bloque cohesionado */
+  --data-table-toolbar-gap: var(--spacing-2); /** Separación entre buscador y acciones de la barra */
+  --data-table-footer-actions-gap: var(--spacing-3); /** Separación entre la paginación y las acciones del pie */
+}

package/src/tokens/molecules/data-table.ts

@@ -0,0 +1,4 @@
+import dataTable from '../../../tokens/organism/data-table.json';
+import { flattenTokens } from '../utils';
+
+export const dataTableTokens = flattenTokens(dataTable as never);

package/src/tokens/molecules/date-picker-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --date-picker-field-gap: var(--spacing-2); /** Espacio entre label, trigger, helper y error */
+  --date-picker-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --date-picker-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --date-picker-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --date-picker-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --date-picker-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --date-picker-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --date-picker-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --date-picker-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --date-picker-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --date-picker-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --date-picker-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --date-picker-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/date-picker-field.ts

@@ -0,0 +1,8 @@
+import tokens from '../../../tokens/molecule/date-picker-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const datePickerFieldBaseTokens   = all.filter(t => !t.name.startsWith('--date-picker-field-error-') && !t.name.startsWith('--date-picker-field-helper-'));
+export const datePickerFieldErrorTokens  = all.filter(t => t.name.startsWith('--date-picker-field-error-'));
+export const datePickerFieldHelperTokens = all.filter(t => t.name.startsWith('--date-picker-field-helper-'));

package/src/tokens/molecules/date-picker.css

@@ -0,0 +1,40 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --date-picker-button-cursor: pointer; /** Cursor del botón: abre el calendario, no se escribe en él */
+  --date-picker-inline-size: var(--input-width); /** Anchura del control: la del campo, que siempre ocupa su contenedor */
+  --date-picker-disabled-cursor: var(--input-disabled-cursor); /** Cursor con el control deshabilitado */
+  --date-picker-button-slot-size: var(--size-component-md); /** Lado del hueco que ocupa el botón del calendario dentro del campo: la talla md, la misma que el campo — así el adorno queda cuadrado sobre el control y su borde inferior coincide con el del campo */
+  --date-picker-button-sm-slot-size: var(--size-component-sm); /** Lado del hueco — sm */
+  --date-picker-button-lg-slot-size: var(--size-component-lg); /** Lado del hueco — lg */
+  --date-picker-button-icon-size: var(--font-size-3); /** Tamaño del glifo del calendario — md (20px, acorde al campo de 40). El mismo peldaño que la flecha de `SearchForm` */
+  --date-picker-button-sm-icon-size: var(--icon-size-sm); /** Tamaño del glifo — sm (16px) */
+  --date-picker-button-lg-icon-size: var(--icon-size-md); /** Tamaño del glifo — lg (24px) */
+  --date-picker-message-gap: var(--spacing-2); /** Espacio entre el campo y el aviso de fecha incompleta: el mismo que separa las partes de un campo de formulario */
+  --date-picker-transition-duration: var(--input-transition-duration); /** Duración de la transición de tinta del botón */
+  --date-picker-transition-easing: var(--input-transition-easing); /** Curva de la transición */
+  --date-picker-button-color: var(--color-primary); /** Color del glifo: la tinta del campo, prusia sobre claro */
+  --date-picker-button-hover-color: var(--color-primary); /** Color del glifo bajo el puntero: la misma tinta. El adorno no pinta fondo ni línea al pasar el puntero */
+  --date-picker-message-font-family: var(--form-error-font-family); /** Familia del aviso de fecha incompleta */
+  --date-picker-message-line-height: var(--form-error-line-height); /** Interlineado del aviso */
+  --date-picker-border-width: var(--input-border-width); /** Grosor del borde del campo: el del sistema. Lo usa el anillo de foco del botón, que va justo por dentro de esa línea */
+  --date-picker-button-disabled-color: var(--input-disabled-color); /** Color del glifo con el campo deshabilitado */
+  --date-picker-button-focus-ring-width: var(--control-focus-ring-width); /** Grosor del anillo de foco del botón: el del sistema. Es lo único que marca el foco, porque el adorno no tiene fondo */
+  --date-picker-button-focus-ring-color: var(--input-focus-border-color); /** Color del anillo de foco del botón: el del borde del campo en foco */
+  --date-picker-message-font-size: var(--form-error-font-size); /** Cuerpo del aviso */
+  --date-picker-message-font-weight: var(--form-error-font-weight); /** Peso del aviso */
+  --date-picker-message-color: var(--form-error-color); /** Color del aviso: el del error de formulario — lo que se escribió no es una fecha */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --date-picker-button-color: var(--color-text-on-dark); /** Color del glifo — surface-dark */
+  --date-picker-button-hover-color: var(--color-text-on-dark); /** Color del glifo bajo el puntero — surface-dark */
+  --date-picker-button-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del botón — surface-dark */
+  --date-picker-message-color: var(--color-error-text-on-dark); /** Color del aviso — surface-dark */
+  --date-picker-button-disabled-color: var(--input-disabled-color); /** Color del glifo deshabilitado — surface-dark */
+}

package/src/tokens/molecules/date-picker.ts

@@ -0,0 +1,4 @@
+import datePicker from '../../../tokens/molecule/date-picker.json';
+import { flattenTokens } from '../utils';
+
+export const datePickerTokens = flattenTokens(datePicker as never);

package/src/tokens/molecules/date-time-field.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --date-time-field-gap: var(--spacing-2); /** Espacio entre label, controles, helper y error */
+  --date-time-field-controls-gap: var(--spacing-2); /** Espacio entre DatePickerField y TimeField */
+  --date-time-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --date-time-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --date-time-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --date-time-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --date-time-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --date-time-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --date-time-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --date-time-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --date-time-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --date-time-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --date-time-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --date-time-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/date-time-field.ts

@@ -0,0 +1,8 @@
+import tokens from '../../../tokens/molecule/date-time-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(tokens as never);
+
+export const dateTimeFieldBaseTokens   = all.filter(t => !t.name.startsWith('--date-time-field-error-') && !t.name.startsWith('--date-time-field-helper-'));
+export const dateTimeFieldErrorTokens  = all.filter(t => t.name.startsWith('--date-time-field-error-'));
+export const dateTimeFieldHelperTokens = all.filter(t => t.name.startsWith('--date-time-field-helper-'));

package/src/tokens/molecules/docs-search.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --docs-search-results-max-block-size: min(28rem, 60vh); /** Alto máximo de la lista: a partir de ahí scrollea dentro en vez de empujar la página */
+  --docs-search-gap: var(--spacing-3); /** Aire entre el campo de búsqueda y la lista de resultados */
+  --docs-search-results-gap: var(--spacing-1); /** Aire entre dos resultados */
+  --docs-search-result-padding-block: var(--spacing-3); /** Padding vertical de un resultado */
+  --docs-search-result-padding-inline: var(--spacing-3); /** Padding horizontal de un resultado */
+  --docs-search-result-gap: var(--spacing-1); /** Aire entre las tres líneas de un resultado: producto, título y extracto */
+  --docs-search-result-excerpt-line-height: var(--line-height-normal); /** Interlineado del extracto */
+  --docs-search-result-product-font-size: var(--font-size-1); /** Cuerpo del rótulo de producto del resultado */
+  --docs-search-status-padding-block: var(--spacing-3); /** Padding vertical del aviso de estado (buscando / sin resultados) */
+  --docs-search-status-padding-inline: var(--spacing-3); /** Padding horizontal del aviso de estado */
+  --docs-search-status-gap: var(--spacing-2); /** Aire entre el indicador de carga y su texto */
+  --docs-search-result-border-radius: var(--border-radius-default); /** Radio de un resultado */
+  --docs-search-result-color: var(--color-text-on-light); /** Color del resultado — tinta de la superficie */
+  --docs-search-result-title-font-size: var(--text-font-size); /** Cuerpo del título del resultado: el del texto que indexa */
+  --docs-search-result-title-font-weight: var(--font-weight-emphasis); /** Peso del título del resultado */
+  --docs-search-result-excerpt-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del extracto: un peldaño por debajo del título */
+  --docs-search-result-excerpt-color: var(--color-text-muted-on-light); /** Color del extracto — atenuado: acompaña al título, no compite con él */
+  --docs-search-result-product-color: var(--color-text-muted-on-light); /** Color del rótulo de producto — atenuado */
+  --docs-search-result-mark-bg: var(--color-accent-2); /** Fondo del resaltado de coincidencias (`<mark>`) dentro del extracto: amarillo de marca. Es un relleno autocontenido —fondo y tinta emparejados—, así que no cambia en superficie oscura */
+  --docs-search-result-mark-color: var(--color-text-on-light); /** Tinta del resaltado de coincidencias sobre el amarillo */
+  --docs-search-status-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del aviso de estado */
+  --docs-search-status-color: var(--color-text-muted-on-light); /** Color del aviso de estado — atenuado */
+  --docs-search-result-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del resultado resaltado — el del Menu: la inversión de marca. El foco es virtual, así que puntero y teclado marcan el mismo relleno */
+  --docs-search-result-highlighted-color: var(--menu-item-highlighted-color); /** Texto del resultado resaltado — el del Menu: producto y extracto lo heredan por `currentColor` */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --docs-search-result-color: var(--color-text-on-dark); /** Color del resultado — surface-dark */
+  --docs-search-result-excerpt-color: var(--color-text-muted-on-dark); /** Color del extracto — surface-dark */
+  --docs-search-result-product-color: var(--color-text-muted-on-dark); /** Rótulo de producto — surface-dark */
+  --docs-search-status-color: var(--color-text-muted-on-dark); /** Aviso de estado — surface-dark */
+  --docs-search-result-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del resultado resaltado — surface-dark */
+  --docs-search-result-highlighted-color: var(--menu-item-highlighted-color); /** Texto del resultado resaltado — surface-dark */
+}