@studiolxd/brand 49.28.0 → 51.0.0

package/src/tokens/components/file-upload.css

@@ -3,9 +3,6 @@
  */
 
 :root {
-  --file-upload-border-style: dashed; /** Estilo de borde del dropzone */
-  --file-upload-drag-border-style: solid; /** Estilo de borde en drag activo */
-  --file-upload-error-border-style: solid; /** Estilo de borde en error */
   --file-upload-disabled-opacity: 0.5; /** Opacidad cuando está deshabilitado */
   --file-upload-padding-inline: var(--spacing-5); /** Padding horizontal del dropzone */
   --file-upload-gap: var(--spacing-1); /** Espacio entre elementos dentro del dropzone */
@@ -40,7 +37,6 @@
   --file-upload-border-dash-gap: var(--spacing-2); /** Hueco entre trazos del borde discontinuo (antes 10px, fuera de la escala) */
   --file-upload-border-color: var(--color-primary); /** Borde del dropzone por defecto */
   --file-upload-border-width: var(--border-width-default); /** Grosor del borde */
-  --file-upload-border-radius: var(--border-radius-default); /** Radio de esquinas del dropzone */
   --file-upload-bg: var(--color-surface-secondary-on-light); /** Fondo del dropzone */
   --file-upload-text-color: var(--color-text-on-light); /** Color del texto principal */
   --file-upload-subtext-color: var(--color-text-muted-on-light); /** Color del texto secundario y restricciones */
@@ -61,7 +57,7 @@
   --file-upload-thumb-bg: var(--color-surface-secondary-on-light); /** Fondo del thumb para iconos (no imagen) */
   --file-upload-thumb-icon-color: var(--color-icon-secondary-on-light); /** Color del icono de archivo genérico */
   --file-upload-remove-color: var(--color-text-muted-on-light); /** Color del botón eliminar */
-  --file-upload-remove-color-hover: var(--color-error-text-on-light); /** Color del botón eliminar al hacer hover */
+  --file-upload-remove-hover-color: var(--color-error-text-on-light); /** Color del botón eliminar al hacer hover */
   --file-upload-text-font-size: var(--text-font-size); /** El texto del dropzone es texto corriente: hereda el cuerpo de la superficie — talla md */
   --file-upload-sm-text-font-size: var(--text-paragraph-small-font-size); /** Texto del dropzone — talla sm: un peldaño por debajo del cuerpo */
   --file-upload-lg-text-font-size: var(--text-paragraph-large-font-size); /** Texto del dropzone — talla lg: un peldaño por encima */
@@ -84,18 +80,18 @@ html.dark {
   --file-upload-subtext-color: var(--color-text-muted-on-dark); /** Texto secundario — surface-dark */
   --file-upload-icon-color: var(--color-text-on-dark); /** Icono de subida — surface-dark */
   --file-upload-drag-border-color: var(--color-text-on-dark); /** Borde con arrastre activo — surface-dark */
-  --file-upload-drag-bg: var(--color-background-dark); /** Fondo con arrastre activo — surface-dark: el lienzo, para que el dropzone se vacíe igual que en claro */
+  --file-upload-drag-bg: var(--color-bg-dark); /** Fondo con arrastre activo — surface-dark: el lienzo, para que el dropzone se vacíe igual que en claro */
   --file-upload-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
   --file-upload-error-bg: var(--color-surface-secondary-on-dark); /** Fondo en error — surface-dark */
-  --file-upload-item-bg: var(--color-background-dark); /** Fondo de cada archivo — surface-dark */
+  --file-upload-item-bg: var(--color-bg-dark); /** Fondo de cada archivo — surface-dark */
   --file-upload-item-border-color: var(--color-text-on-dark); /** Borde de cada archivo — surface-dark */
   --file-upload-item-name-color: var(--color-text-on-dark); /** Nombre del archivo — surface-dark */
   --file-upload-item-size-color: var(--color-text-muted-on-dark); /** Peso del archivo — surface-dark */
   --file-upload-item-error-color: var(--color-error-text-on-dark); /** Mensaje de error por archivo — surface-dark */
   --file-upload-item-error-border-color: var(--color-error-text-on-dark); /** Borde del archivo con error — surface-dark */
-  --file-upload-item-error-bg: var(--color-background-dark); /** Fondo del archivo con error — surface-dark */
+  --file-upload-item-error-bg: var(--color-bg-dark); /** Fondo del archivo con error — surface-dark */
   --file-upload-thumb-bg: var(--color-surface-secondary-on-dark); /** Fondo de la miniatura — surface-dark */
   --file-upload-thumb-icon-color: var(--color-text-muted-on-dark); /** Icono de archivo genérico — surface-dark: `grey-dark` no llega a 3:1 sobre prusia */
   --file-upload-remove-color: var(--color-text-muted-on-dark); /** Aspa de quitar — surface-dark */
-  --file-upload-remove-color-hover: var(--color-error-text-on-dark); /** Aspa de quitar, bajo el puntero — surface-dark */
+  --file-upload-remove-hover-color: var(--color-error-text-on-dark); /** Aspa de quitar, bajo el puntero — surface-dark */
 }

package/src/tokens/components/floating-dock.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --floating-dock-panel-inline-size: 22rem; /** Ancho del panel (352px). Medida de layout, como `modal.width-max`: no sale de la escala de espaciado */
-  --floating-dock-panel-block-size: 32rem; /** Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible */
+  --floating-dock-panel-width: 22rem; /** Ancho del panel (352px). Medida de layout, como `modal.max-width`: no sale de la escala de espaciado */
+  --floating-dock-panel-height: 32rem; /** Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible */
   --floating-dock-z-index: var(--z-index-bar); /** Capa del ancla: la del chrome de aplicación (100). Por debajo del velo y del modal, para que un diálogo del producto siga tapando al dock */
   --floating-dock-offset-inline: var(--spacing-5); /** Distancia al borde lateral de la ventana (24px). Se suma al `safe-area-inset` del dispositivo, nunca lo sustituye */
   --floating-dock-offset-block: var(--spacing-5); /** Distancia al borde superior o inferior de la ventana (24px). Se suma al `safe-area-inset` */

package/src/tokens/components/floating-panel.css

@@ -6,7 +6,7 @@
   --floating-panel-z-index: var(--z-index-floating); /** Capa z — por encima del modal (1001) para que los paneles flotantes sean visibles dentro de modales */
   --floating-panel-transition-duration: var(--motion-duration-fast); /** Duración de la animación de entrada/salida */
   --floating-panel-transition-easing: var(--motion-easing-default); /** Easing de la animación */
-  --floating-panel-bg: var(--color-background-light); /** Fondo de cualquier panel flotante (popover, context-menu…) */
+  --floating-panel-bg: var(--color-bg-light); /** Fondo de cualquier panel flotante (popover, context-menu…) */
   --floating-panel-border-width: var(--border-width-default); /** Grosor del borde */
   --floating-panel-border-color: var(--color-primary); /** Color del borde — prussian en modo claro */
   --floating-panel-border-radius: var(--border-radius-default); /** Sin radio de esquinas */
@@ -17,6 +17,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --floating-panel-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --floating-panel-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --floating-panel-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }

package/src/tokens/components/input.css

@@ -46,7 +46,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --input-bg: var(--color-background-dark); /** Background — surface-dark */
+  --input-bg: var(--color-bg-dark); /** Background — surface-dark */
   --input-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --input-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --input-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
@@ -57,7 +57,7 @@ html.dark {
   --input-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
   --input-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
   --input-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
-  --input-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --input-error-bg: var(--color-bg-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
   --input-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
   --input-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
   --input-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */

package/src/tokens/components/kbd.css

@@ -29,7 +29,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --kbd-bg: rgba(255, 255, 255, 0.08); /** Fondo del keycap — surface-dark: el gris claro no existe en superficie oscura, y el velo translúcido es el mismo recurso que usan Skeleton y Table */
+  --kbd-bg: var(--color-surface-secondary-on-dark); /** Fondo del keycap — surface-dark: la superficie secundaria en su par oscuro, el mismo rol (y el mismo token) que usa Skeleton. Antes era un velo blanco al 8 % escrito a mano */
   --kbd-color: var(--color-text-on-dark); /** Símbolo — surface-dark */
   --kbd-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
 }

package/src/tokens/components/label.css

@@ -11,6 +11,7 @@
   --label-letter-spacing: var(--letter-spacing-normal); /** Letter spacing */
   --label-font-weight: var(--font-weight-emphasis); /** Font weight */
   --label-color: var(--color-text-on-light); /** Text color */
+  --label-optional-color: var(--color-text-muted-on-light); /** Tinta de la marca « (opcional)» tras la etiqueta de un campo `optional` (D70): la apagada, mismo tamaño que la etiqueta */
 }
 
 .surface-dark,
@@ -18,4 +19,5 @@
 [data-theme="dark"],
 html.dark {
   --label-color: var(--color-text-on-dark); /** Color — surface-dark */
+  --label-optional-color: var(--color-text-muted-on-dark); /** Tinta de la marca de opcional — surface-dark */
 }

package/src/tokens/components/link.css

@@ -3,23 +3,33 @@
  */
 
 :root {
-  --link-hover-underline-width: 0px; /** Grosor de la línea en hover (en claro desaparece) */
+  --link-hover-underline-width: 0px; /** Grosor del subrayado en hover (en claro no hay línea: la quita `link.hover-decoration-line`) */
+  --link-decoration-line: underline; /** Si el enlace se subraya en reposo (`text-decoration-line`): `underline` o `none`. En claro, sí */
+  --link-hover-decoration-line: none; /** Si el enlace se subraya en hover (`text-decoration-line`): en claro la línea desaparece */
+  --link-in-text-hover-underline-width: 0px; /** Enlace dentro de texto corrido: sin línea en hover, en las dos superficies (D41) */
+  --link-in-text-decoration-line: underline; /** Enlace dentro de texto corrido: subrayado en reposo, en las DOS superficies (D41). Sin par oscuro a propósito */
+  --link-in-text-hover-decoration-line: none; /** Enlace dentro de texto corrido: sin subrayado en hover, en las dos superficies (D41) */
   --link-cursor: pointer; /** Cursor */
   --link-ink-hover-underline-width: 0px; /** Tono ink: sin línea en hover */
+  --link-ink-decoration-line: underline; /** Tono ink: subrayado en reposo, en las dos superficies */
+  --link-ink-hover-decoration-line: none; /** Tono ink: sin subrayado en hover */
   --link-accent-1-hover-underline-width: 0px; /** Tono accent-1: sin línea en hover, como accent */
-  --link-underline-offset: var(--spacing-1); /** Separación entre el texto y la línea */
+  --link-accent-1-decoration-line: underline; /** Tono accent-1: subrayado en reposo, en las dos superficies */
+  --link-accent-1-hover-decoration-line: none; /** Tono accent-1: sin subrayado en hover */
+  --link-underline-offset: var(--spacing-1); /** Separación entre el texto y la línea. Se reserva como `padding-block-end` (el hueco de la línea: nada se mueve al aparecer) y la línea se coloca con `text-underline-position: under` y `text-underline-offset: calc(<separación> - <grosor>)`, de modo que cae en el borde inferior de ese hueco */
   --link-icon-gap: var(--spacing-2); /** Aire entre el icono y el texto del enlace */
   --link-color: var(--color-text-on-light); /** El enlace no tiene color propio: es texto, y lo distingue el subrayado */
   --link-hover-color: var(--color-text-on-light); /** Color en hover */
-  --link-underline-width: var(--border-width-default); /** El subrayado es una línea bajo el enlace (borde, no text-decoration): cubre texto e icono y se separa del texto. Su grosor */
+  --link-underline-width: var(--border-width-default); /** Grosor del subrayado (`text-decoration-thickness`). El subrayado es `text-decoration` con grosor y distancia de token (D64): se mantiene en alto contraste, se imprime y lo reconocen las herramientas de accesibilidad. Si se pinta o no lo dice `link.decoration-line`: un grosor 0 no oculta la línea (el navegador pinta como mínimo un píxel de dispositivo) */
+  --link-in-text-underline-width: var(--border-width-default); /** Enlace dentro de texto corrido (párrafo, etiqueta, Prose): línea en reposo, en las DOS superficies. Entre texto, el color no basta para distinguirlo (en oscuro, amarillo sobre blanco da 1,5:1; WCAG 1.4.1 pide 3:1 u otra marca), así que la marca es la línea (D41). Sin par oscuro a propósito */
   --link-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --link-focus-ring-offset: var(--border-width-default); /** Separación entre el enlace y el anillo */
   --link-focus-ring-color: var(--color-primary); /** Anillo de foco */
   --link-ink-color: var(--color-text-on-light); /** Tono ink (enlaces utilitarios: legal, volver): tinta */
   --link-ink-underline-width: var(--border-width-default); /** Tono ink: línea en reposo, en las dos superficies */
-  --link-accent-1-color: var(--color-accent-1); /** Tono accent-1 (lavanda): color saturado que ya contrasta en cualquier superficie, sin par surface-dark (mismo motivo que Card/Step/ProgressBar) */
-  --link-accent-1-hover-color: var(--color-accent-1); /** Tono accent-1: mismo color en hover, como accent — lo que cambia es la línea */
-  --link-accent-1-underline-width: var(--border-width-default); /** Tono accent-1: línea en reposo, igual en las dos superficies (el color no cambia) */
+  --link-accent-1-underline-width: var(--border-width-default); /** Tono accent-1: línea en reposo, en las dos superficies */
+  --link-accent-1-color: var(--link-color); /** Tono accent-1 (lavanda) en superficie clara: cae al tono por defecto. La lavanda sobre blanco da 2,02:1 (D41): el tono solo se ve en superficie oscura */
+  --link-accent-1-hover-color: var(--link-hover-color); /** Tono accent-1 en hover, superficie clara: el del tono por defecto */
 }
 
 .surface-dark,
@@ -27,9 +37,13 @@
 [data-theme="dark"],
 html.dark {
   --link-underline-width: 0px; /** Sin línea en reposo — surface-dark */
+  --link-decoration-line: none; /** Sin subrayado en reposo — surface-dark: el amarillo ya lo distingue fuera del texto corrido */
+  --link-hover-decoration-line: underline; /** Subrayado en hover — surface-dark */
   --link-color: var(--color-accent-2); /** Color — surface-dark: amarillo (accent-2), y sin línea en reposo */
   --link-hover-color: var(--color-accent-2); /** Hover — surface-dark: amarillo, con línea */
   --link-hover-underline-width: var(--border-width-default); /** Línea en hover — surface-dark */
   --link-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
   --link-ink-color: var(--color-text-on-dark); /** Tono ink — surface-dark: blanco, no amarillo */
+  --link-accent-1-color: var(--color-accent-1); /** Tono accent-1 — surface-dark: lavanda, que sobre prusia sí contrasta */
+  --link-accent-1-hover-color: var(--color-accent-1); /** Tono accent-1 en hover — surface-dark: lavanda */
 }

package/src/tokens/components/logo.css

@@ -7,7 +7,7 @@
   --logo-height-md: var(--size-component-md); /** Alto por defecto: cabeceras y formularios de acceso */
   --logo-height-lg: var(--size-component-lg); /** Alto destacado: pie de página */
   --logo-height-xl: var(--icon-size-xl); /** Alto de marca: la cabecera del sitio. Es la talla ilustrativa de la escala de iconos (64px), no una talla de control */
-  --logo-height-xxl: calc(var(--logo-height-xl) * 4 / 3); /** Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px */
+  --logo-height-2xl: calc(var(--logo-height-xl) * 4 / 3); /** Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px */
   --logo-color: var(--color-text-on-light); /** Color del trazado sobre superficie clara */
 }
 

package/src/tokens/components/message-bubble.css

@@ -16,7 +16,7 @@
   --message-bubble-font-weight: var(--font-weight-default); /** Peso tipográfico */
   --message-bubble-color: var(--color-text-on-light); /** Tinta del mensaje. La misma para los dos emisores: el globo no tiene relleno, así que el texto va sobre la superficie */
   --message-bubble-border-color: var(--color-text-on-light); /** Contorno del globo. Único separador del mensaje: no hay relleno ni sombra */
-  --message-bubble-tail-fill: var(--color-background-light); /** Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí */
+  --message-bubble-tail-fill: var(--color-bg-light); /** Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí */
 }
 
 .surface-dark,
@@ -25,5 +25,5 @@
 html.dark {
   --message-bubble-color: var(--color-text-on-dark); /** Tinta del mensaje — superficie oscura */
   --message-bubble-border-color: var(--color-text-on-dark); /** Contorno del globo — superficie oscura */
-  --message-bubble-tail-fill: var(--color-background-dark); /** Vaciado de la cola — superficie oscura */
+  --message-bubble-tail-fill: var(--color-bg-dark); /** Vaciado de la cola — superficie oscura */
 }

package/src/tokens/components/multi-select.css

@@ -61,12 +61,12 @@
 [data-theme="dark"],
 html.dark {
   --multi-select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
-  --multi-select-bg: var(--color-background-dark); /** Background — surface-dark */
+  --multi-select-bg: var(--color-bg-dark); /** Background — surface-dark */
   --multi-select-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --multi-select-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --multi-select-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
   --multi-select-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder color — surface-dark */
-  --multi-select-content-bg: var(--color-background-dark); /** Dropdown background — surface-dark */
+  --multi-select-content-bg: var(--color-bg-dark); /** Dropdown background — surface-dark */
   --multi-select-content-border-color: var(--color-text-on-dark); /** Dropdown border color — surface-dark */
   --multi-select-pill-bg: var(--color-accent-1); /** Relleno de las pills — surface-dark: el prusia coincidiría con el lienzo; par de `Button primary` (lavanda con tinta prusia) */
   --multi-select-pill-color: var(--color-primary); /** Texto de las pills — surface-dark */

package/src/tokens/components/number-badge.css

@@ -20,8 +20,8 @@
   --number-badge-support-1-color: var(--color-text-on-light); /** Texto sobre support-1 */
   --number-badge-support-2-bg: var(--color-support-2); /** Fondo support-2 (cayenne) */
   --number-badge-support-2-color: var(--color-text-on-light); /** Texto sobre support-2 */
-  --number-badge-danger-bg: var(--color-error-fill); /** Fondo danger (red) */
-  --number-badge-danger-color: var(--color-error-fill-text); /** Texto sobre danger */
+  --number-badge-error-bg: var(--color-error-fill); /** Fondo error (rojo) */
+  --number-badge-error-color: var(--color-error-fill-text); /** Texto sobre error */
   --number-badge-success-bg: var(--color-success-fill); /** Fondo success (green) */
   --number-badge-success-color: var(--color-success-fill-text); /** Texto sobre success */
   --number-badge-neutral-bg: var(--color-surface-inverse-on-light); /** Fondo neutral (dark grey) */
@@ -33,7 +33,7 @@
 [data-theme="dark"],
 html.dark {
   --number-badge-primary-bg: var(--color-text-on-dark); /** Relleno primary — surface-dark. El prusia es el lienzo y el contador desaparecería; se invierte en vez de pasar a lavanda porque `accent-1` ya es otra variante del mismo componente (mismo caso que `Tag`) */
-  --number-badge-primary-color: var(--color-background-dark); /** Texto sobre primary — surface-dark */
+  --number-badge-primary-color: var(--color-bg-dark); /** Texto sobre primary — surface-dark */
   --number-badge-neutral-bg: var(--color-surface-inverse-on-dark); /** Relleno neutral — surface-dark: la superficie invertida, como en `Tag` */
   --number-badge-neutral-color: var(--color-text-on-light); /** Texto sobre neutral — surface-dark */
 }

package/src/tokens/components/otp-input.css

@@ -3,6 +3,6 @@
  */
 
 :root {
-  --otp-input-cell-inline-size: 3.5ch; /** Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4) */
+  --otp-input-cell-width: 3.5ch; /** Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4) */
   --otp-input-gap: var(--spacing-2); /** Separación entre celdas del código */
 }

package/src/tokens/components/radio.css

@@ -36,4 +36,6 @@ html.dark {
   --radio-border-color: var(--color-text-on-dark); /** Borde de la marca — surface-dark: la tinta de la superficie */
   --radio-dot-color: var(--color-text-on-dark); /** Punto de la marca — surface-dark */
   --radio-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+  --radio-disabled-border-color: var(--color-text-muted-on-dark); /** Borde deshabilitado — surface-dark (mismo par que checkbox) */
+  --radio-disabled-dot-color: var(--color-text-muted-on-dark); /** Punto deshabilitado y seleccionado — surface-dark (mismo par que checkbox) */
 }

package/src/tokens/components/select.css

@@ -48,11 +48,11 @@
 [data-theme="dark"],
 html.dark {
   --select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
-  --select-bg: var(--color-background-dark); /** Fondo del trigger — surface-dark */
+  --select-bg: var(--color-bg-dark); /** Fondo del trigger — surface-dark */
   --select-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
   --select-border-color: var(--color-text-on-dark); /** Color del borde — surface-dark */
   --select-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — surface-dark */
-  --select-content-bg: var(--color-background-dark); /** Fondo del dropdown — surface-dark */
+  --select-content-bg: var(--color-bg-dark); /** Fondo del dropdown — surface-dark */
   --select-content-border-color: var(--color-text-on-dark); /** Borde del dropdown — surface-dark */
   --select-separator-color: var(--color-text-on-dark); /** Color del separador entre grupos — surface-dark */
   --select-item-highlighted-bg: var(--color-text-on-dark); /** Relleno de la opción resaltada — surface-dark: la misma inversión de marca, al revés */

package/src/tokens/components/sidebar.css

@@ -19,7 +19,7 @@
   --sidebar-group-padding-block: var(--spacing-2); /** Aire vertical de una sección del panel */
   --sidebar-group-gap: var(--spacing-1); /** Entre elementos de una sección */
   --sidebar-rail-width: calc(2 * var(--app-header-padding-inline) + var(--size-component-md)); /** Ancho del rail (72px): inset simétrico `1rem` (16px) a los dos lados — el izquierdo alinea el centro del icono con el centro del `MenuButton` del header — + caja de icono `2.5rem` (40px). Ver `rail-padding-inline-start` */
-  --sidebar-bg: var(--color-background-light); /** Fondo */
+  --sidebar-bg: var(--color-bg-light); /** Fondo */
   --sidebar-border-width: var(--border-width-default); /** Borde que separa la sidebar del contenido */
   --sidebar-border-color: var(--color-primary); /** Color del borde */
   --sidebar-rail-padding-inline-start: var(--app-header-padding-inline); /** Inset del rail (16px), igual a `--app-header-padding-inline`, a AMBOS lados (simétrico): alinea el centro del icono del rail con el centro del `MenuButton` del header (x=36px) y evita el aire desigual de una columna estrecha. Desacoplado del padding de desplegada (`padding-inline`) para no romper su alineación, ya correcta por composición de otros tokens */
@@ -35,7 +35,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --sidebar-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --sidebar-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --sidebar-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
   --sidebar-separator-color: var(--color-text-on-dark); /** Línea — surface-dark */
   --sidebar-resizer-hover-color: var(--color-text-on-dark); /** Asa de redimensionado bajo el puntero — surface-dark */

package/src/tokens/components/site-header.css

@@ -13,12 +13,11 @@
   --site-header-settings-gap: var(--spacing-5); /** Separación entre los ajustes del sitio: en fila en escritorio, apilados en móvil */
   --site-header-content-height-compact: var(--logo-height-lg); /** Lo más alto que lleva la barra en móvil (por debajo de md): el logotipo a talla lg (48px), para que quepa con los controles */
   --site-header-content-height-narrow: var(--logo-height-md); /** Lo más alto que lleva la barra en teléfono (por debajo de sm): el logotipo a talla md (40px), para caber en 360px con idioma y menú */
-  --site-header-bg: var(--color-background-light); /** Fondo de la barra */
+  --site-header-bg: var(--color-bg-light); /** Fondo de la barra */
   --site-header-z-index: var(--app-header-z-index); /** Capa z — sobre el contenido, bajo los paneles flotantes */
-  --site-header-panel-bg: var(--color-background-light); /** Fondo del panel de navegación */
+  --site-header-panel-bg: var(--color-bg-light); /** Fondo del panel de navegación */
   --site-header-panel-padding-block: var(--section-padding-block-xl); /** Aire superior del panel, entre la barra y el índice */
-  --site-header-settings-margin-block-start: var(--site-header-panel-gap); /** Aire mínimo entre el índice y los ajustes del sitio (idioma, tema), que van pegados al borde inferior del panel: el ritmo del panel. Se mantiene por compatibilidad; quien quiera cambiarlo toca `panel-gap` */
-  --site-header-content-height: var(--logo-height-xxl); /** Lo más alto que lleva la barra: el logotipo a talla xxl (85px) */
+  --site-header-content-height: var(--logo-height-2xl); /** Lo más alto que lleva la barra: el logotipo a talla 2xl (85px) */
   --site-header-height-narrow: calc(var(--site-header-content-height-narrow) + 2 * var(--app-header-padding-block)); /** Alto de la barra en teléfono (56px, la misma que la barra de aplicación) */
   --site-header-height-compact: calc(var(--site-header-content-height-compact) + 2 * var(--app-header-padding-block)); /** Alto de la barra en móvil (64px) */
   --site-header-logo-margin-inline-start: calc(-1 * var(--container-padding-inline)); /** La marca sale del aire lateral del Container: el logotipo trae su propio espacio de seguridad en el trazado, y con el padding encima se veía descolgado del borde del contenido */
@@ -30,6 +29,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --site-header-bg: var(--color-background-dark); /** Fondo de la barra — surface-dark */
-  --site-header-panel-bg: var(--color-background-dark); /** Fondo del panel — surface-dark */
+  --site-header-bg: var(--color-bg-dark); /** Fondo de la barra — surface-dark */
+  --site-header-panel-bg: var(--color-bg-dark); /** Fondo del panel — surface-dark */
 }

package/src/tokens/components/slider.css

@@ -5,7 +5,7 @@
 :root {
   --slider-cursor: pointer; /** Cursor sobre la banda */
   --slider-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
-  --slider-control-block-size: var(--spacing-5); /** Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no */
+  --slider-control-height: var(--spacing-5); /** Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no */
   --slider-track-size: var(--spacing-1); /** Grosor del carril */
   --slider-thumb-size: var(--icon-size-sm); /** Lado del pulgar (cuadrado, como el resto de formas del sistema) */
   --slider-value-gap: var(--spacing-3); /** Separación entre la banda y el valor */

package/src/tokens/components/spinner.css

@@ -3,11 +3,11 @@
  */
 
 :root {
-  --spinner-border-width-sm: 2px; /** Grosor del trazo (stroke) para sm */
-  --spinner-border-width-md: 2px; /** Grosor del trazo (stroke) para md */
-  --spinner-border-width-lg: 2px; /** Grosor del trazo (stroke) para lg */
   --spinner-animation-duration: 2000ms; /** Un ciclo del bucle: dibujar el contorno (mitad) y desdibujarlo (mitad) */
   --spinner-size-sm: var(--spacing-4); /** 16px — compact spinner */
   --spinner-size-md: var(--spacing-5); /** 24px — default spinner */
   --spinner-size-lg: var(--spacing-8); /** 64px — large spinner */
+  --spinner-border-width-sm: var(--border-width-default); /** Grosor del trazo (stroke) para sm: el rol de todo borde del sistema (1px) */
+  --spinner-border-width-md: var(--border-width-default); /** Grosor del trazo (stroke) para md: el rol de todo borde del sistema (1px) */
+  --spinner-border-width-lg: var(--border-width-default); /** Grosor del trazo (stroke) para lg: el rol de todo borde del sistema (1px) */
 }

package/src/tokens/components/step.css

@@ -14,7 +14,7 @@
   --step-border-radius: var(--border-radius-default); /** Marca cuadrada, el radio del sistema — no `round`: la marca de un paso es identidad de marca, no un avatar ni una píldora */
   --step-border-width: var(--border-width-default); /** Filete de la marca hueca (estado `pending`). Todo borde del sistema mide lo mismo */
   --step-font-weight: var(--font-weight-default); /** Peso de la cifra: dentro de una marca rellena de otro color el peso no señala nada — el estado ya lo dicen el relleno y el filete */
-  --step-pending-bg: var(--color-background-light); /** Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad */
+  --step-pending-bg: var(--color-bg-light); /** Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad */
   --step-pending-border-color: var(--color-border-default-on-light); /** Filete de una marca hueca: el borde general del sistema */
   --step-pending-color: var(--color-text-muted-on-light); /** Cifra de una marca hueca: texto secundario */
   --step-tone-primary-bg: var(--color-primary); /** Relleno tono primary: la marca del sistema */
@@ -27,8 +27,8 @@
   --step-tone-support-1-color: var(--color-text-on-light); /** Tinta sobre support-1 */
   --step-tone-support-2-bg: var(--color-support-2); /** Relleno tono support-2 (cayenne) */
   --step-tone-support-2-color: var(--color-text-on-light); /** Tinta sobre support-2 */
-  --step-tone-danger-bg: var(--color-error-fill); /** Relleno tono danger */
-  --step-tone-danger-color: var(--color-error-fill-text); /** Tinta sobre danger */
+  --step-tone-error-bg: var(--color-error-fill); /** Relleno tono error */
+  --step-tone-error-color: var(--color-error-fill-text); /** Tinta sobre error */
   --step-tone-success-bg: var(--color-success-fill); /** Relleno tono success */
   --step-tone-success-color: var(--color-success-fill-text); /** Tinta sobre success */
   --step-tone-neutral-bg: var(--color-surface-inverse-on-light); /** Relleno tono neutral (gris oscuro) */
@@ -43,7 +43,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --step-pending-bg: var(--color-background-dark); /** Fondo de la marca hueca — surface-dark */
+  --step-pending-bg: var(--color-bg-dark); /** Fondo de la marca hueca — surface-dark */
   --step-pending-border-color: var(--color-text-on-dark); /** Filete de la marca hueca — surface-dark */
   --step-pending-color: var(--color-text-muted-on-dark); /** Cifra de la marca hueca — surface-dark */
   --step-tone-primary-bg: var(--color-accent-2); /** Relleno primary — surface-dark. El prusia es el lienzo; se aparta de la derivación (lavanda, el par de Button primary) a propósito, en amarillo, para que el progreso no se confunda con una acción — decisión heredada de Stepper */

package/src/tokens/components/switcher.css

@@ -12,7 +12,6 @@
   --switcher-sm-track-width: 2.25em; /** Ancho del track — variante sm */
   --switcher-sm-track-height: 1.25em; /** Alto del track — variante sm */
   --switcher-sm-thumb-size: 0.875em; /** Tamaño del thumb — variante sm */
-  --switcher-lg-track-width: 3rem; /** Ancho del track — variante lg (48px, alineado con la talla lg del sistema, size-component.lg). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo */
   --switcher-lg-track-height: 1.625rem; /** Alto del track — variante lg. En rem, ver lg-track-width */
   --switcher-lg-thumb-size: 1.25rem; /** Tamaño del thumb — variante lg. En rem, ver lg-track-width */
   --switcher-target-size: var(--size-target-min); /** Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el track (sm) sea menor en bloque. Se extiende de forma invisible y centrada, sin mover la maqueta */
@@ -20,8 +19,9 @@
   --switcher-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando está deshabilitado */
   --switcher-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
   --switcher-transition-easing: var(--motion-easing-default); /** Easing de la transición */
+  --switcher-lg-track-width: var(--size-component-lg); /** Ancho del track — variante lg: la talla lg del sistema (48px). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo */
   --switcher-track-bg: var(--color-border-default-on-light); /** Fondo del track — estado off */
-  --switcher-track-bg-checked: var(--color-primary); /** Fondo del track — estado on */
+  --switcher-track-checked-bg: var(--color-primary); /** Fondo del track — estado on */
   --switcher-track-border-radius: var(--border-radius-round); /** Radio del track (pill) */
   --switcher-thumb-border-radius: var(--border-radius-round); /** Radio del thumb (circular) */
   --switcher-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
@@ -37,7 +37,7 @@
 [data-theme="dark"],
 html.dark {
   --switcher-error-ring-color: var(--color-error-text-on-dark); /** Anillo de error — surface-dark */
-  --switcher-track-bg-checked: var(--color-accent-1); /** Fondo del track (on) — surface-dark. `track-bg-checked` (prussian) coincide con el fondo de la superficie y quedaría invisible; se usa accent-1 en su lugar. */
+  --switcher-track-checked-bg: var(--color-accent-1); /** Fondo del track (on) — surface-dark. `track-checked-bg` (prussian) coincide con el fondo de la superficie y quedaría invisible; se usa accent-1 en su lugar. */
   --switcher-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
   --switcher-track-bg: var(--color-text-on-dark); /** Fondo del track (off) — surface-dark. `track-bg` es un rol de borde (`color.border.default-on-light`) y la regla de derivación le da `color.text.on-dark`, igual que el carril sin recorrer del Slider. */
   --switcher-thumb-bg: var(--color-primary); /** Color del thumb — surface-dark. El thumb blanco desaparecería sobre el track claro del estado off; en prusia contrasta con los dos tracks oscuros (blanco en off, lavanda en on), como el pulgar lavanda del Slider sobre su carril blanco. */

package/src/tokens/components/tabs.css

@@ -3,11 +3,12 @@
  */
 
 :root {
+  --tabs-trigger-line-height: 1.15; /** Interlineado del trigger (1,15). Es el que el `<button>` heredaba de `normalize.css` sin declararlo; el token lo fija para que no dependa de la hoja de terceros. No hay primitivo de 1,15 en `line-height.*`: es medida propia del componente */
   --tabs-list-gap: var(--spacing-1); /** Gap entre triggers */
   --tabs-trigger-padding-block: var(--spacing-3); /** Padding vertical del trigger */
   --tabs-trigger-padding-inline: var(--spacing-4); /** Padding horizontal del trigger */
   --tabs-trigger-font-size: var(--font-size-2); /** Tamaño de fuente del trigger */
-  --tabs-trigger-pill-color-active: var(--color-white); /** Texto del trigger activo en variante pill */
+  --tabs-trigger-pill-active-color: var(--color-white); /** Texto del trigger activo en variante pill */
   --tabs-trigger-disabled-opacity: var(--opacity-disabled); /** Opacidad del trigger deshabilitado */
   --tabs-content-padding-block: var(--spacing-4); /** Padding vertical del panel de contenido */
   --tabs-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
@@ -21,7 +22,7 @@
   --tabs-trigger-active-color: var(--color-text-on-light); /** Color del trigger activo */
   --tabs-trigger-indicator-width: var(--border-width-default); /** Grosor del indicador activo (underline) */
   --tabs-trigger-indicator-color: var(--color-primary); /** Color del indicador activo */
-  --tabs-trigger-pill-bg-active: var(--color-primary); /** Fondo del trigger activo en variante pill */
+  --tabs-trigger-pill-active-bg: var(--color-primary); /** Fondo del trigger activo en variante pill */
   --tabs-trigger-border-radius: var(--border-radius-default); /** Radio de borde del trigger (pill + focus ring) */
   --tabs-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
   --tabs-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
@@ -36,8 +37,8 @@ html.dark {
   --tabs-trigger-color: var(--color-text-muted-on-dark); /** Color del trigger inactivo — surface-dark */
   --tabs-trigger-hover-color: var(--color-text-on-dark); /** Color hover del trigger — surface-dark */
   --tabs-trigger-active-color: var(--color-text-on-dark); /** Color del trigger activo — surface-dark */
-  --tabs-trigger-pill-bg-active: var(--color-accent-1); /** Fondo del trigger activo, variante pill — surface-dark. `color.primary` coincide con el lienzo oscuro; toma el par de `Button primary` (lavanda con tinta prusia), la regla de derivación del sistema. Antes se invertía a blanco, que es el par de los componentes en los que `accent-1` ya es otra variante — no es el caso de Tabs */
-  --tabs-trigger-pill-color-active: var(--color-primary); /** Texto del trigger activo, variante pill — surface-dark */
+  --tabs-trigger-pill-active-bg: var(--color-accent-1); /** Fondo del trigger activo, variante pill — surface-dark. `color.primary` coincide con el lienzo oscuro; toma el par de `Button primary` (lavanda con tinta prusia), la regla de derivación del sistema. Antes se invertía a blanco, que es el par de los componentes en los que `accent-1` ya es otra variante — no es el caso de Tabs */
+  --tabs-trigger-pill-active-color: var(--color-primary); /** Texto del trigger activo, variante pill — surface-dark */
   --tabs-trigger-indicator-color: var(--color-text-on-dark); /** Indicador de pestaña activa (underline) — surface-dark: color.primary colisiona con el fondo */
   --tabs-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
 }

package/src/tokens/components/tag.css

@@ -27,8 +27,8 @@
   --tag-warning-bg: var(--color-warning-fill); /** Aviso — relleno universal del rol de feedback. Es el amarillo de siempre, pero llega por el rol, no por la marca */
   --tag-success-bg: var(--color-success-fill); /** Éxito — relleno universal del sistema */
   --tag-success-color: var(--color-success-fill-text); /** Éxito — contenido sobre el relleno */
-  --tag-danger-bg: var(--color-error-fill); /** Peligro — relleno universal del sistema */
-  --tag-danger-color: var(--color-error-fill-text); /** Peligro — contenido sobre el relleno */
+  --tag-error-bg: var(--color-error-fill); /** Error — relleno universal del sistema */
+  --tag-error-color: var(--color-error-fill-text); /** Error — contenido sobre el relleno */
   --tag-warning-color: var(--color-warning-fill-text); /** Aviso — contenido sobre el relleno: el prusia (11,17:1, AAA) */
 }
 
@@ -37,7 +37,7 @@
 [data-theme="dark"],
 html.dark {
   --tag-primary-bg: var(--color-text-on-dark); /** Marca primaria, relleno — surface-dark (invertido: el prusia es el fondo de la superficie y el tag desaparecería) */
-  --tag-primary-color: var(--color-background-dark); /** Marca primaria, texto — surface-dark (invertido) */
+  --tag-primary-color: var(--color-bg-dark); /** Marca primaria, texto — surface-dark (invertido) */
   --tag-info-bg: var(--color-text-on-dark); /** Información, relleno — surface-dark (invertido, misma razón que primary) */
-  --tag-info-color: var(--color-background-dark); /** Información, texto — surface-dark (invertido) */
+  --tag-info-color: var(--color-bg-dark); /** Información, texto — surface-dark (invertido) */
 }

package/src/tokens/components/text-inline.css

@@ -5,7 +5,8 @@
 :root {
   --text-inline-emphasis-font-weight: var(--font-weight-emphasis); /** Peso del énfasis fuerte en línea */
   --text-inline-muted-color: var(--color-text-muted-on-light); /** Texto secundario en línea: una aclaración, un metadato */
-  --text-inline-destructive-color: var(--color-destructive-text-on-light); /** Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno */
+  --text-inline-error-color: var(--color-error-text-on-light); /** Énfasis en línea de error: un estado que ha fallado («cupón rechazado»). Es tinta sobre la superficie, nunca un relleno */
+  --text-inline-destructive-color: var(--color-destructive-text-on-light); /** Énfasis en línea con intención destructiva: la palabra que avisa de que una acción hace perder algo («esta acción **borra** el curso»). Es tinta sobre la superficie, nunca un relleno */
   --text-inline-success-color: var(--color-success-text-on-light); /** Énfasis en línea con intención de logro */
   --text-inline-strikethrough-color: var(--color-text-muted-on-light); /** Texto tachado: lo que ya está hecho (un producto en el carrito) o ya no vale. Atenuado como el texto secundario; con un `tone` manda el tono */
   --text-inline-strikethrough-thickness: var(--border-width-default); /** Grosor de la línea del tachado: el de los demás trazos del sistema */
@@ -17,6 +18,7 @@
 html.dark {
   --text-inline-strikethrough-color: var(--color-text-muted-on-dark); /** Texto tachado — surface-dark */
   --text-inline-muted-color: var(--color-text-muted-on-dark); /** Texto secundario en línea — surface-dark */
+  --text-inline-error-color: var(--color-error-text-on-dark); /** Énfasis de error — surface-dark */
   --text-inline-destructive-color: var(--color-destructive-text-on-dark); /** Énfasis destructivo — surface-dark */
   --text-inline-success-color: var(--color-success-text-on-dark); /** Énfasis de logro — surface-dark */
 }

package/src/tokens/components/text.css

@@ -37,7 +37,7 @@
   --text-list-item-gap: var(--spacing-3); /** Aire entre el contenido de una fila y su accesorio final (trailing) (12px) */
   --text-font-weight: var(--font-weight-default); /** Default font weight */
   --text-color: var(--color-text-on-light); /** Default text color */
-  --text-background: var(--color-background-light); /** Fondo del lienzo de página (body) */
+  --text-bg: var(--color-bg-light); /** Fondo del lienzo de página (body) */
   --text-heading-font-weight: var(--font-weight-emphasis); /** Heading font weight */
   --text-heading-color: var(--color-text-on-light); /** Heading color */
   --text-h1-font-family: var(--text-heading-font-family); /** H1 font family */
@@ -87,7 +87,7 @@
 [data-theme="dark"],
 html.dark {
   --text-color: var(--color-text-on-dark); /** Color de texto por defecto — surface-dark */
-  --text-background: var(--color-background-dark); /** Fondo del lienzo de página — surface-dark */
+  --text-bg: var(--color-bg-dark); /** Fondo del lienzo de página — surface-dark */
   --text-h1-color: var(--color-text-on-dark); /** H1 color — surface-dark */
   --text-h2-color: var(--color-text-on-dark); /** H2 color — surface-dark */
   --text-h3-color: var(--color-text-on-dark); /** H3 color — surface-dark */

package/src/tokens/components/textarea.css

@@ -60,7 +60,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --textarea-bg: var(--color-background-dark); /** Background — surface-dark */
+  --textarea-bg: var(--color-bg-dark); /** Background — surface-dark */
   --textarea-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --textarea-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --textarea-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
@@ -71,7 +71,7 @@ html.dark {
   --textarea-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
   --textarea-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
   --textarea-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
-  --textarea-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --textarea-error-bg: var(--color-bg-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
   --textarea-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
   --textarea-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
   --textarea-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */

package/src/tokens/components/tooltip.css

@@ -10,7 +10,7 @@
   --tooltip-font-size: var(--font-size-1); /** Tamaño de texto del bocadillo */
   --tooltip-line-height: var(--line-height-snug); /** Interlineado del bocadillo */
   --tooltip-offset: var(--spacing-1); /** Separación entre disparador y bocadillo (4px). Fuente del sideOffset por defecto */
-  --tooltip-bg: var(--color-background-dark); /** Fondo del bocadillo — superficie invertida para máximo contraste */
+  --tooltip-bg: var(--color-bg-dark); /** Fondo del bocadillo — superficie invertida para máximo contraste */
   --tooltip-color: var(--color-text-on-dark); /** Color del texto del bocadillo */
   --tooltip-border-radius: var(--border-radius-default); /** Radio de esquinas del bocadillo */
   --tooltip-z-index: var(--floating-panel-z-index); /** Capa z — la misma que el resto de paneles flotantes */
@@ -22,6 +22,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --tooltip-bg: var(--color-background-light); /** Fondo del bocadillo — surface-dark. Mismo patrón de superficie invertida que en claro (ahí: fondo `background.dark`), pero simétrico para lienzo oscuro: fondo claro, texto oscuro. Sin acento de marca */
+  --tooltip-bg: var(--color-bg-light); /** Fondo del bocadillo — surface-dark. Mismo patrón de superficie invertida que en claro (ahí: fondo `background.dark`), pero simétrico para lienzo oscuro: fondo claro, texto oscuro. Sin acento de marca */
   --tooltip-color: var(--color-text-on-light); /** Texto del bocadillo — surface-dark, el par del fondo claro */
 }

package/src/tokens/components/typing-indicator.css

@@ -7,7 +7,7 @@
   --typing-indicator-dot-rise: 0.25rem; /** Cuánto sube el punto en lo alto del salto (4px): una fracción del propio punto, no un desplazamiento de maqueta */
   --typing-indicator-dot-gap: var(--spacing-1); /** Separación entre puntos */
   --typing-indicator-dot-opacity-inactive: var(--opacity-disabled); /** Opacidad del punto en reposo */
-  --typing-indicator-dot-opacity-active: var(--opacity-full); /** Opacidad del punto en lo alto del salto */
+  --typing-indicator-dot-active-opacity: var(--opacity-full); /** Opacidad del punto en lo alto del salto */
   --typing-indicator-animation-duration: var(--motion-duration-slow); /** Duración del ciclo de animación */
   --typing-indicator-animation-easing: var(--motion-easing-in-out); /** Curva del salto: movimiento */
   --typing-indicator-dot-color: var(--color-text-on-light); /** Color de los puntos */