@mimi-ng/cli 0.1.1 → 0.3.0

package/dist/templates/theme/theme-base.css

@@ -1,5 +1,5 @@
-/* Mimi · tema base (estilo Vivid).
-   Valores tomados de docs/design/tokens-vivid.css. Nombres según docs/spec.md, sección 6.
+/* Mimi · tema base.
+   Valores tomados de docs/design/tokens-mimi.css. Nombres según docs/spec.md, sección 6.
    Este archivo no importa Tailwind ni carga fuentes: lo hace la app que lo usa. */
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -26,8 +26,34 @@
   --mimi-border: oklch(0.922 0 0);
   --mimi-input: oklch(0.88 0 0);
   --mimi-input-background: oklch(1 0 0);
+  /* Borde de un campo con el puntero encima (tokens-mimi.css; lo usa Pagination desde la G1.11). */
+  --mimi-input-hover: color-mix(in oklab, var(--mimi-foreground) 30%, var(--mimi-input));
   --mimi-ring: oklch(0.708 0 0);
-  --mimi-overlay: oklch(0 0 0 / 50%);
+
+  /* Tonos (contraste AA verificado en el diseño) */
+  --mimi-success: oklch(0.527 0.137 150);
+  --mimi-success-foreground: oklch(0.985 0 0);
+  --mimi-success-soft-foreground: oklch(0.42 0.115 150);
+  --mimi-warning: oklch(0.795 0.162 75);
+  --mimi-warning-foreground: oklch(0.28 0.07 55);
+  --mimi-warning-soft-foreground: oklch(0.45 0.11 60);
+  --mimi-info: oklch(0.546 0.19 255);
+  --mimi-info-foreground: oklch(0.985 0 0);
+  --mimi-info-soft-foreground: oklch(0.45 0.17 255);
+  --mimi-destructive-soft-foreground: oklch(0.5 0.2 27);
+  /* Cuánto tono lleva el fondo suave (-soft) */
+  --mimi-soft-mix: 12%;
+
+  /* Superficies */
+  --mimi-tooltip: oklch(0.205 0 0);
+  --mimi-tooltip-foreground: oklch(0.985 0 0);
+  --mimi-overlay: oklch(0.145 0 0 / 0.38);
+  --mimi-glass: oklch(1 0 0 / 0.72);
+  --mimi-glass-border: oklch(0 0 0 / 0.08);
+
+  /* Efectos (iguales en claro y oscuro) */
+  --mimi-overlay-blur: 6px;
+  --mimi-glass-blur: 16px;
 
   /* Fuentes (sin cargar: la app decide si trae Outfit) */
   --mimi-font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
@@ -42,6 +68,14 @@
   --mimi-control-height-sm: 2rem;
   --mimi-control-height-lg: 3rem;
 
+  /* Compartidos por los controles */
+  --mimi-focus-ring: 0 0 0 3px var(--mimi-ring-soft);
+  --mimi-focus-outline: 2px solid var(--mimi-ring);
+  --mimi-focus-offset: 2px;
+  --mimi-disabled-opacity: 0.5;
+  --mimi-icon-size: 1rem;
+  --mimi-icon-size-sm: 0.875rem;
+
   /* Movimiento. `translate` mueve el pulgar del Switch (y --mimi-lift si se usa). */
   --mimi-lift: 0px;
   --mimi-press-scale: 0.975;
@@ -71,18 +105,130 @@
   --mimi-shadow-neutral-hover: 0 2px 4px oklch(0 0 0 / 0.06), 0 10px 20px -8px oklch(0 0 0 / 0.14);
   /* Pulgar del Switch (igual en claro y oscuro) */
   --mimi-shadow-thumb: 0 1px 3px oklch(0 0 0 / 0.2);
+  --mimi-shadow-success:
+    0 1px 2px color-mix(in oklch, var(--mimi-success) 25%, transparent),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-success) 35%, transparent);
+  --mimi-shadow-success-hover:
+    0 1px 2px color-mix(in oklch, var(--mimi-success) 30%, transparent),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-success) 42%, transparent);
+  --mimi-shadow-warning:
+    0 1px 2px color-mix(in oklch, var(--mimi-warning) 30%, transparent),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-warning) 45%, transparent);
+  --mimi-shadow-warning-hover:
+    0 1px 2px color-mix(in oklch, var(--mimi-warning) 35%, transparent),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-warning) 52%, transparent);
+  --mimi-shadow-info:
+    0 1px 2px color-mix(in oklch, var(--mimi-info) 25%, transparent),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-info) 35%, transparent);
+  --mimi-shadow-info-hover:
+    0 1px 2px color-mix(in oklch, var(--mimi-info) 30%, transparent),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-info) 42%, transparent);
+  /* Menús, diálogos, toasts y píldoras flotantes */
+  --mimi-shadow-popover:
+    0 0 0 1px oklch(0 0 0 / 0.04), 0 4px 8px -2px oklch(0 0 0 / 0.06),
+    0 16px 32px -8px oklch(0 0 0 / 0.16);
+  /* Glow: brillo de color alrededor del componente (opción glow) */
+  --mimi-glow-primary:
+    0 0 0 1px color-mix(in oklch, var(--mimi-primary) 22%, transparent),
+    0 0 14px 0 color-mix(in oklch, var(--mimi-primary) 30%, transparent),
+    0 0 32px 4px color-mix(in oklch, var(--mimi-primary) 16%, transparent);
+  --mimi-glow-success:
+    0 0 0 1px color-mix(in oklch, var(--mimi-success) 30%, transparent),
+    0 0 14px 0 color-mix(in oklch, var(--mimi-success) 45%, transparent),
+    0 0 32px 4px color-mix(in oklch, var(--mimi-success) 25%, transparent);
+  --mimi-glow-warning:
+    0 0 0 1px color-mix(in oklch, var(--mimi-warning) 35%, transparent),
+    0 0 14px 0 color-mix(in oklch, var(--mimi-warning) 55%, transparent),
+    0 0 32px 4px color-mix(in oklch, var(--mimi-warning) 30%, transparent);
+  --mimi-glow-info:
+    0 0 0 1px color-mix(in oklch, var(--mimi-info) 30%, transparent),
+    0 0 14px 0 color-mix(in oklch, var(--mimi-info) 45%, transparent),
+    0 0 32px 4px color-mix(in oklch, var(--mimi-info) 25%, transparent);
+  --mimi-glow-destructive:
+    0 0 0 1px color-mix(in oklch, var(--mimi-destructive) 30%, transparent),
+    0 0 14px 0 color-mix(in oklch, var(--mimi-destructive) 45%, transparent),
+    0 0 32px 4px color-mix(in oklch, var(--mimi-destructive) 25%, transparent);
+  --mimi-glow: var(--mimi-glow-primary);
 
   /* Derivados */
   --mimi-primary-hover: color-mix(in oklch, var(--mimi-primary) 88%, var(--mimi-background));
   --mimi-secondary-hover: color-mix(in oklch, var(--mimi-secondary) 80%, var(--mimi-foreground) 6%);
+  /* Hover de los sólidos con texto blanco: se aleja del texto, hacia foreground (AA, V.1). En
+     oscuro el texto es oscuro y el hover sigue yendo hacia el fondo. */
   --mimi-destructive-hover: color-mix(
     in oklch,
     var(--mimi-destructive) 88%,
-    var(--mimi-background)
+    var(--mimi-foreground)
   );
   --mimi-ring-soft: color-mix(in oklch, var(--mimi-ring) 32%, transparent);
-  --mimi-destructive-soft: color-mix(in oklch, var(--mimi-destructive) 24%, transparent);
   --mimi-switch-off: color-mix(in oklch, var(--mimi-foreground) 20%, transparent);
+  /* Tonos: <tono>-soft = fondo suave, <tono>-hover = hover, <tono>-ring = anillo */
+  --mimi-success-soft: color-mix(
+    in oklab,
+    var(--mimi-success) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  --mimi-warning-soft: color-mix(
+    in oklab,
+    var(--mimi-warning) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  --mimi-info-soft: color-mix(
+    in oklab,
+    var(--mimi-info) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  --mimi-success-hover: color-mix(in oklab, var(--mimi-success) 88%, var(--mimi-foreground));
+  --mimi-warning-hover: color-mix(in oklab, var(--mimi-warning) 88%, var(--mimi-background));
+  --mimi-info-hover: color-mix(in oklab, var(--mimi-info) 88%, var(--mimi-foreground));
+  --mimi-success-ring: color-mix(in oklch, var(--mimi-success) 30%, transparent);
+  --mimi-warning-ring: color-mix(in oklch, var(--mimi-warning) 34%, transparent);
+  --mimi-info-ring: color-mix(in oklch, var(--mimi-info) 30%, transparent);
+  --mimi-destructive-ring: color-mix(in oklch, var(--mimi-destructive) 24%, transparent);
+  /* Fondo suave de destructive. En la 1.0 pasa a llamarse destructive-soft (spec 12). */
+  --mimi-destructive-soft-bg: color-mix(
+    in oklab,
+    var(--mimi-destructive) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  /* Alias de la 0.1.0 (era el anillo). Se quita en la 1.0: usar destructive-ring (spec 12). */
+  --mimi-destructive-soft: var(--mimi-destructive-ring);
+  /* Variantes con tono (fórmulas de F2 Tokens y Tonos): hover de soft, borde y hover de outline */
+  --mimi-primary-soft-hover: color-mix(in oklab, var(--mimi-primary) 22%, var(--mimi-background));
+  --mimi-primary-border: color-mix(in oklch, var(--mimi-primary) 55%, transparent);
+  --mimi-primary-subtle: color-mix(in oklch, var(--mimi-primary) 10%, transparent);
+  --mimi-success-soft-hover: color-mix(in oklab, var(--mimi-success) 22%, var(--mimi-background));
+  --mimi-success-border: color-mix(in oklch, var(--mimi-success) 55%, transparent);
+  --mimi-success-subtle: color-mix(in oklch, var(--mimi-success) 10%, transparent);
+  --mimi-warning-soft-hover: color-mix(in oklab, var(--mimi-warning) 22%, var(--mimi-background));
+  --mimi-warning-border: color-mix(in oklch, var(--mimi-warning) 55%, transparent);
+  --mimi-warning-subtle: color-mix(in oklch, var(--mimi-warning) 10%, transparent);
+  --mimi-info-soft-hover: color-mix(in oklab, var(--mimi-info) 22%, var(--mimi-background));
+  --mimi-info-border: color-mix(in oklch, var(--mimi-info) 55%, transparent);
+  --mimi-info-subtle: color-mix(in oklch, var(--mimi-info) 10%, transparent);
+  --mimi-destructive-soft-hover: color-mix(
+    in oklab,
+    var(--mimi-destructive) 22%,
+    var(--mimi-background)
+  );
+  --mimi-destructive-border: color-mix(in oklch, var(--mimi-destructive) 55%, transparent);
+  --mimi-destructive-subtle: color-mix(in oklch, var(--mimi-destructive) 10%, transparent);
+
+  /* Entradas avanzadas, Grupo 2 (tokens-mimi.css; G2.0b). Los componentes los leen con valor
+     de respaldo, var(--mimi-track, …), para funcionar con un tema anterior a la 0.3.0. */
+  --mimi-range: color-mix(in oklab, var(--mimi-primary) 9%, var(--mimi-background));
+  --mimi-track: color-mix(in oklab, var(--mimi-foreground) 12%, var(--mimi-background));
+  --mimi-track-fill: var(--mimi-primary);
+  --mimi-thumb: oklch(1 0 0);
+  --mimi-chip: var(--mimi-secondary);
+  --mimi-chip-foreground: var(--mimi-secondary-foreground);
+  --mimi-dropzone: color-mix(in oklab, var(--mimi-muted) 55%, var(--mimi-background));
+  --mimi-dropzone-active: var(--mimi-info-soft);
+  --mimi-dropzone-active-border: var(--mimi-info);
+  --mimi-strength-weak: var(--mimi-destructive);
+  --mimi-strength-medium: var(--mimi-warning);
+  --mimi-strength-strong: var(--mimi-success);
+  --mimi-selection: var(--mimi-info);
 
   color-scheme: light;
 }
@@ -93,7 +239,7 @@
   --mimi-foreground: oklch(0.985 0 0);
   --mimi-card: oklch(0.175 0 0);
   --mimi-card-foreground: oklch(0.985 0 0);
-  --mimi-popover: oklch(0.175 0 0);
+  --mimi-popover: oklch(0.205 0 0);
   --mimi-popover-foreground: oklch(0.985 0 0);
   --mimi-primary: oklch(0.922 0 0);
   --mimi-primary-foreground: oklch(0.205 0 0);
@@ -108,8 +254,26 @@
   --mimi-border: oklch(1 0 0 / 10%);
   --mimi-input: oklch(1 0 0 / 15%);
   --mimi-input-background: oklch(1 0 0 / 4.5%);
+  --mimi-input-hover: color-mix(in oklab, var(--mimi-foreground) 30%, var(--mimi-input));
   --mimi-ring: oklch(0.556 0 0);
-  --mimi-overlay: oklch(0 0 0 / 50%);
+
+  --mimi-success: oklch(0.72 0.15 150);
+  --mimi-success-foreground: oklch(0.2 0.05 150);
+  --mimi-success-soft-foreground: oklch(0.84 0.12 150);
+  --mimi-warning: oklch(0.81 0.15 78);
+  --mimi-warning-foreground: oklch(0.22 0.05 60);
+  --mimi-warning-soft-foreground: oklch(0.87 0.12 80);
+  --mimi-info: oklch(0.72 0.14 250);
+  --mimi-info-foreground: oklch(0.2 0.05 250);
+  --mimi-info-soft-foreground: oklch(0.84 0.1 250);
+  --mimi-destructive-soft-foreground: oklch(0.82 0.12 22);
+  --mimi-soft-mix: 18%;
+
+  --mimi-tooltip: oklch(0.922 0 0);
+  --mimi-tooltip-foreground: oklch(0.205 0 0);
+  --mimi-overlay: oklch(0 0 0 / 0.6);
+  --mimi-glass: oklch(0.205 0 0 / 0.7);
+  --mimi-glass-border: oklch(1 0 0 / 0.09);
 
   --mimi-shadow-card:
     inset 0 1px 0 oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.5),
@@ -132,6 +296,48 @@
   --mimi-shadow-neutral-hover:
     inset 0 1px 0 oklch(1 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.5),
     0 10px 20px -8px oklch(0 0 0 / 0.75);
+  --mimi-shadow-success:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-success) 30%, transparent);
+  --mimi-shadow-success-hover:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-success) 40%, transparent);
+  --mimi-shadow-warning:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-warning) 30%, transparent);
+  --mimi-shadow-warning-hover:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-warning) 40%, transparent);
+  --mimi-shadow-info:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 4px 12px -4px color-mix(in oklch, var(--mimi-info) 30%, transparent);
+  --mimi-shadow-info-hover:
+    0 1px 2px oklch(0 0 0 / 0.5),
+    0 8px 18px -6px color-mix(in oklch, var(--mimi-info) 40%, transparent);
+  --mimi-shadow-popover:
+    inset 0 1px 0 oklch(1 0 0 / 0.05), 0 0 0 1px oklch(0 0 0 / 0.6),
+    0 16px 40px -8px oklch(0 0 0 / 0.8);
+  --mimi-glow-primary:
+    0 0 0 1px color-mix(in oklch, var(--mimi-primary) 30%, transparent),
+    0 0 16px 0 color-mix(in oklch, var(--mimi-primary) 32%, transparent),
+    0 0 40px 6px color-mix(in oklch, var(--mimi-primary) 16%, transparent);
+  --mimi-glow-success:
+    0 0 0 1px color-mix(in oklch, var(--mimi-success) 40%, transparent),
+    0 0 16px 0 color-mix(in oklch, var(--mimi-success) 50%, transparent),
+    0 0 40px 6px color-mix(in oklch, var(--mimi-success) 26%, transparent);
+  --mimi-glow-warning:
+    0 0 0 1px color-mix(in oklch, var(--mimi-warning) 40%, transparent),
+    0 0 16px 0 color-mix(in oklch, var(--mimi-warning) 50%, transparent),
+    0 0 40px 6px color-mix(in oklch, var(--mimi-warning) 26%, transparent);
+  --mimi-glow-info:
+    0 0 0 1px color-mix(in oklch, var(--mimi-info) 40%, transparent),
+    0 0 16px 0 color-mix(in oklch, var(--mimi-info) 50%, transparent),
+    0 0 40px 6px color-mix(in oklch, var(--mimi-info) 26%, transparent);
+  --mimi-glow-destructive:
+    0 0 0 1px color-mix(in oklch, var(--mimi-destructive) 40%, transparent),
+    0 0 16px 0 color-mix(in oklch, var(--mimi-destructive) 50%, transparent),
+    0 0 40px 6px color-mix(in oklch, var(--mimi-destructive) 26%, transparent);
+  --mimi-glow: var(--mimi-glow-primary);
 
   /* Los derivados se redeclaran para que tomen la paleta oscura */
   --mimi-primary-hover: color-mix(in oklch, var(--mimi-primary) 88%, var(--mimi-background));
@@ -142,8 +348,73 @@
     var(--mimi-background)
   );
   --mimi-ring-soft: color-mix(in oklch, var(--mimi-ring) 32%, transparent);
-  --mimi-destructive-soft: color-mix(in oklch, var(--mimi-destructive) 24%, transparent);
   --mimi-switch-off: color-mix(in oklch, var(--mimi-foreground) 20%, transparent);
+  /* Tonos: <tono>-soft = fondo suave, <tono>-hover = hover, <tono>-ring = anillo */
+  --mimi-success-soft: color-mix(
+    in oklab,
+    var(--mimi-success) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  --mimi-warning-soft: color-mix(
+    in oklab,
+    var(--mimi-warning) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  --mimi-info-soft: color-mix(
+    in oklab,
+    var(--mimi-info) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  --mimi-success-hover: color-mix(in oklab, var(--mimi-success) 88%, var(--mimi-background));
+  --mimi-warning-hover: color-mix(in oklab, var(--mimi-warning) 88%, var(--mimi-background));
+  --mimi-info-hover: color-mix(in oklab, var(--mimi-info) 88%, var(--mimi-background));
+  --mimi-success-ring: color-mix(in oklch, var(--mimi-success) 30%, transparent);
+  --mimi-warning-ring: color-mix(in oklch, var(--mimi-warning) 34%, transparent);
+  --mimi-info-ring: color-mix(in oklch, var(--mimi-info) 30%, transparent);
+  --mimi-destructive-ring: color-mix(in oklch, var(--mimi-destructive) 24%, transparent);
+  /* Fondo suave de destructive. En la 1.0 pasa a llamarse destructive-soft (spec 12). */
+  --mimi-destructive-soft-bg: color-mix(
+    in oklab,
+    var(--mimi-destructive) var(--mimi-soft-mix),
+    var(--mimi-background)
+  );
+  /* Alias de la 0.1.0 (era el anillo). Se quita en la 1.0: usar destructive-ring (spec 12). */
+  --mimi-destructive-soft: var(--mimi-destructive-ring);
+  /* Variantes con tono (fórmulas de F2 Tokens y Tonos): hover de soft, borde y hover de outline */
+  --mimi-primary-soft-hover: color-mix(in oklab, var(--mimi-primary) 22%, var(--mimi-background));
+  --mimi-primary-border: color-mix(in oklch, var(--mimi-primary) 55%, transparent);
+  --mimi-primary-subtle: color-mix(in oklch, var(--mimi-primary) 10%, transparent);
+  --mimi-success-soft-hover: color-mix(in oklab, var(--mimi-success) 22%, var(--mimi-background));
+  --mimi-success-border: color-mix(in oklch, var(--mimi-success) 55%, transparent);
+  --mimi-success-subtle: color-mix(in oklch, var(--mimi-success) 10%, transparent);
+  --mimi-warning-soft-hover: color-mix(in oklab, var(--mimi-warning) 22%, var(--mimi-background));
+  --mimi-warning-border: color-mix(in oklch, var(--mimi-warning) 55%, transparent);
+  --mimi-warning-subtle: color-mix(in oklch, var(--mimi-warning) 10%, transparent);
+  --mimi-info-soft-hover: color-mix(in oklab, var(--mimi-info) 22%, var(--mimi-background));
+  --mimi-info-border: color-mix(in oklch, var(--mimi-info) 55%, transparent);
+  --mimi-info-subtle: color-mix(in oklch, var(--mimi-info) 10%, transparent);
+  --mimi-destructive-soft-hover: color-mix(
+    in oklab,
+    var(--mimi-destructive) 22%,
+    var(--mimi-background)
+  );
+  --mimi-destructive-border: color-mix(in oklch, var(--mimi-destructive) 55%, transparent);
+  --mimi-destructive-subtle: color-mix(in oklch, var(--mimi-destructive) 10%, transparent);
+
+  /* Entradas avanzadas: se repiten las que mezclan otros tokens, por si .dark no está en <html>. */
+  --mimi-range: color-mix(in oklab, var(--mimi-primary) 14%, var(--mimi-background));
+  --mimi-track: color-mix(in oklab, var(--mimi-foreground) 16%, var(--mimi-background));
+  --mimi-track-fill: var(--mimi-primary);
+  --mimi-thumb: oklch(0.985 0 0);
+  --mimi-chip: var(--mimi-secondary);
+  --mimi-chip-foreground: var(--mimi-secondary-foreground);
+  --mimi-dropzone: color-mix(in oklab, var(--mimi-muted) 50%, var(--mimi-background));
+  --mimi-dropzone-active: var(--mimi-info-soft);
+  --mimi-dropzone-active-border: var(--mimi-info);
+  --mimi-strength-weak: var(--mimi-destructive);
+  --mimi-strength-medium: var(--mimi-warning);
+  --mimi-strength-strong: var(--mimi-success);
+  --mimi-selection: var(--mimi-info);
 
   color-scheme: dark;
 }
@@ -179,14 +450,69 @@
   --color-destructive: var(--mimi-destructive);
   --color-destructive-foreground: var(--mimi-destructive-foreground);
   --color-destructive-hover: var(--mimi-destructive-hover);
-  --color-destructive-soft: var(--mimi-destructive-soft);
+  --color-destructive-ring: var(--mimi-destructive-ring);
+  --color-destructive-soft-bg: var(--mimi-destructive-soft-bg);
+  --color-destructive-soft-foreground: var(--mimi-destructive-soft-foreground);
+  /* Alias de la 0.1.0: ring-destructive-soft sigue funcionando hasta la 1.0 (spec 12) */
+  --color-destructive-soft: var(--mimi-destructive-ring);
+  --color-success: var(--mimi-success);
+  --color-success-foreground: var(--mimi-success-foreground);
+  --color-success-soft: var(--mimi-success-soft);
+  --color-success-soft-foreground: var(--mimi-success-soft-foreground);
+  --color-success-hover: var(--mimi-success-hover);
+  --color-success-ring: var(--mimi-success-ring);
+  --color-warning: var(--mimi-warning);
+  --color-warning-foreground: var(--mimi-warning-foreground);
+  --color-warning-soft: var(--mimi-warning-soft);
+  --color-warning-soft-foreground: var(--mimi-warning-soft-foreground);
+  --color-warning-hover: var(--mimi-warning-hover);
+  --color-warning-ring: var(--mimi-warning-ring);
+  --color-info: var(--mimi-info);
+  --color-info-foreground: var(--mimi-info-foreground);
+  --color-info-soft: var(--mimi-info-soft);
+  --color-info-soft-foreground: var(--mimi-info-soft-foreground);
+  --color-info-hover: var(--mimi-info-hover);
+  --color-info-ring: var(--mimi-info-ring);
+  --color-primary-soft-hover: var(--mimi-primary-soft-hover);
+  --color-primary-border: var(--mimi-primary-border);
+  --color-primary-subtle: var(--mimi-primary-subtle);
+  --color-success-soft-hover: var(--mimi-success-soft-hover);
+  --color-success-border: var(--mimi-success-border);
+  --color-success-subtle: var(--mimi-success-subtle);
+  --color-warning-soft-hover: var(--mimi-warning-soft-hover);
+  --color-warning-border: var(--mimi-warning-border);
+  --color-warning-subtle: var(--mimi-warning-subtle);
+  --color-info-soft-hover: var(--mimi-info-soft-hover);
+  --color-info-border: var(--mimi-info-border);
+  --color-info-subtle: var(--mimi-info-subtle);
+  --color-destructive-soft-hover: var(--mimi-destructive-soft-hover);
+  --color-destructive-border: var(--mimi-destructive-border);
+  --color-destructive-subtle: var(--mimi-destructive-subtle);
+  --color-tooltip: var(--mimi-tooltip);
+  --color-tooltip-foreground: var(--mimi-tooltip-foreground);
+  --color-glass: var(--mimi-glass);
+  --color-glass-border: var(--mimi-glass-border);
   --color-border: var(--mimi-border);
   --color-input: var(--mimi-input);
+  --color-input-hover: var(--mimi-input-hover);
   --color-input-background: var(--mimi-input-background);
   --color-ring: var(--mimi-ring);
   --color-ring-soft: var(--mimi-ring-soft);
   --color-overlay: var(--mimi-overlay);
   --color-switch-off: var(--mimi-switch-off);
+  --color-range: var(--mimi-range);
+  --color-track: var(--mimi-track);
+  --color-track-fill: var(--mimi-track-fill);
+  --color-thumb: var(--mimi-thumb);
+  --color-chip: var(--mimi-chip);
+  --color-chip-foreground: var(--mimi-chip-foreground);
+  --color-dropzone: var(--mimi-dropzone);
+  --color-dropzone-active: var(--mimi-dropzone-active);
+  --color-dropzone-active-border: var(--mimi-dropzone-active-border);
+  --color-strength-weak: var(--mimi-strength-weak);
+  --color-strength-medium: var(--mimi-strength-medium);
+  --color-strength-strong: var(--mimi-strength-strong);
+  --color-selection: var(--mimi-selection);
 
   --radius-sm: var(--mimi-radius-sm);
   --radius-md: calc(var(--mimi-radius) - 2px);
@@ -203,6 +529,22 @@
   --shadow-neutral: var(--mimi-shadow-neutral);
   --shadow-neutral-hover: var(--mimi-shadow-neutral-hover);
   --shadow-thumb: var(--mimi-shadow-thumb);
+  --shadow-success: var(--mimi-shadow-success);
+  --shadow-success-hover: var(--mimi-shadow-success-hover);
+  --shadow-warning: var(--mimi-shadow-warning);
+  --shadow-warning-hover: var(--mimi-shadow-warning-hover);
+  --shadow-info: var(--mimi-shadow-info);
+  --shadow-info-hover: var(--mimi-shadow-info-hover);
+  --shadow-popover: var(--mimi-shadow-popover);
+  --shadow-glow: var(--mimi-glow);
+  --shadow-glow-primary: var(--mimi-glow-primary);
+  --shadow-glow-success: var(--mimi-glow-success);
+  --shadow-glow-warning: var(--mimi-glow-warning);
+  --shadow-glow-info: var(--mimi-glow-info);
+  --shadow-glow-destructive: var(--mimi-glow-destructive);
+
+  --blur-glass: var(--mimi-glass-blur);
+  --blur-overlay: var(--mimi-overlay-blur);
 
   --font-sans: var(--mimi-font-sans);
   --font-mono: var(--mimi-font-mono);
@@ -228,6 +570,32 @@
   }
 }
 
+/* Texto solo para lectores de pantalla del CDK: el LiveAnnouncer (Pagination, Toast, Password,
+   File Upload, Tags Input y Combobox múltiple) crea al final del body un elemento con esta clase,
+   pero no carga su CSS (el CDK solo lo inyecta con Dialog y las trampas de foco): sin esta
+   regla, el anuncio («Página 2 de 12») se ve al final de la página. Igual que
+   @angular/cdk/a11y-prebuilt.css, y sin capa, como la inyecta el CDK. */
+.cdk-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+  outline: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  left: 0;
+}
+
+[dir='rtl'] .cdk-visually-hidden {
+  left: auto;
+  right: 0;
+}
+
 @keyframes mimi-spin {
   to {
     transform: rotate(360deg);
@@ -239,3 +607,36 @@
     opacity: 0.45;
   }
 }
+
+/* Grupo 2 (tokens-mimi.css y, mimi-indet, F5 Estructura; G2.0b) */
+@keyframes mimi-caret {
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes mimi-bob {
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes mimi-shake {
+  20%,
+  60% {
+    transform: translateX(-4px);
+  }
+  40%,
+  80% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes mimi-indet {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(260%);
+  }
+}