/*
  Mutakit — tokens
  ARCHIVO GENERADO — NO EDITAR A MANO.

  Generado por scripts/build-tokens.mjs (npm run build:tokens) a partir de:
  - design-system/v1/tokens.v1.css
  - design-system/v1/tokens.components.v1.css
  - design-system/v1/tokens.legacy.css

  Para cambiar un token, editar la fuente en design-system/v1/ y regenerar.
  Es lo que consumen prototipos, componentes y cualquier tool externo.

  Import de Google Fonts (en el <head> de cualquier página que consuma estos tokens):
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap" rel="stylesheet">
*/

/* ===== design-system/v1/tokens.v1.css ===== */

/*
  Mutakit — foundations v1 (2026-09-30; fuente canónica desde 2026-10-12)

  Valores leídos tal cual de las variables y estilos del archivo de Figma
  "Design System Mutante". Este archivo es INPUT: tokens/tokens.css se genera
  a partir de él con `npm run build:tokens` y nunca se edita a mano.

  Las familias tipográficas base (--mu-font-titulo, --mu-font-cuerpo) se
  definen acá; los estilos de texto las referencian.

  Unidades: tamaños, espaciado, radios, íconos y sombras en rem (1rem = 16px);
  bordes y breakpoint en px.

  Pendiente de decidir: en Figma todas las variables letter-spacing valen 0,
  incluida Title/XL, que se había definido con -2%. Ver design-system/v1/README.md.

  Import de Google Fonts necesario (DM Sans con 600 para Button):
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap" rel="stylesheet">
*/

:root {

  /* Color — escalas (Figma: Primary / Secondary / Neutro / Feedback) */
  --mu-color-purple-100: #F8F5FF;
  --mu-color-purple-200: #EFE5FF;
  --mu-color-purple-300: #DECCFF;
  --mu-color-purple-400: #BE99FF;
  --mu-color-purple-500: #9D67FF;
  --mu-color-purple-600: #7B33FF;
  --mu-color-purple-700: #4800CC;
  --mu-color-purple-800: #360099;
  --mu-color-purple-900: #240066;

  --mu-color-pink-100: #FFF5FE;
  --mu-color-pink-200: #FFEBFE;
  --mu-color-pink-300: #FFE0FD;
  --mu-color-pink-400: #FFD4FC;
  --mu-color-pink-500: #FFB2FA;
  --mu-color-pink-600: #FF80F6;
  --mu-color-pink-700: #F53DE8;
  --mu-color-pink-800: #C20AB5;
  --mu-color-pink-900: #8C0782;

  --mu-color-green-100: #FAFFF5;
  --mu-color-green-200: #F3FEE7;
  --mu-color-green-300: #DCFCB6;
  --mu-color-green-400: #C6FA86;
  --mu-color-green-500: #AFF757;
  --mu-color-green-600: #7DDB0A;
  --mu-color-green-700: #61AA08;
  --mu-color-green-800: #467A06;
  --mu-color-green-900: #2A4903;

  --mu-color-orange-100: #FFEFE5;
  --mu-color-orange-200: #FFD0B2;
  --mu-color-orange-300: #FFA266;
  --mu-color-orange-400: #FD8233;
  --mu-color-orange-500: #FB6200;
  --mu-color-orange-600: #D65400;
  --mu-color-orange-700: #B24600;
  --mu-color-orange-800: #803200;
  --mu-color-orange-900: #4D1E00;

  --mu-color-grey-100: #FFFFFF;
  --mu-color-grey-200: #F2F2F2;
  --mu-color-grey-300: #E6E6E6;
  --mu-color-grey-400: #D9D9D9;
  --mu-color-grey-500: #BFBFBF;
  --mu-color-grey-600: #8C8C8C;
  --mu-color-grey-700: #737373;
  --mu-color-grey-800: #404040;
  --mu-color-grey-900: #1A1A1A;

  --mu-color-error-50: #FFF8F8;
  --mu-color-error-100: #FFF0F1;
  --mu-color-error-200: #FFD6DA;
  --mu-color-error-300: #FFA3AD;
  --mu-color-error-400: #FF6B7A;
  --mu-color-error-500: #FF2E47;
  --mu-color-error-600: #E0102C;
  --mu-color-error-700: #B80A22;
  --mu-color-error-800: #850718;
  --mu-color-error-900: #4D040E;

  --mu-color-warning-50: #FFF7ED;
  --mu-color-warning-100: #FFEDD5;
  --mu-color-warning-200: #FED7AA;
  --mu-color-warning-300: #FDBA74;
  --mu-color-warning-400: #FB923C;
  --mu-color-warning-500: #F97316;
  --mu-color-warning-600: #EA580C;
  --mu-color-warning-700: #C2410C;
  --mu-color-warning-800: #9A3412;
  --mu-color-warning-900: #7C2D12;

  --mu-color-success-50: #F0FDF4;
  --mu-color-success-100: #DCFCE7;
  --mu-color-success-200: #BBF7D0;
  --mu-color-success-300: #86EFAC;
  --mu-color-success-400: #4ADE80;
  --mu-color-success-500: #22C55E;
  --mu-color-success-600: #16A34A;
  --mu-color-success-700: #15803D;
  --mu-color-success-800: #166534;
  --mu-color-success-900: #14532D;

  /* Tipografía — familias base (Space Grotesk para Title y Subtitle; DM Sans para Body, Button y Label) */
  --mu-font-titulo: 'Space Grotesk', sans-serif;
  --mu-font-cuerpo: 'DM Sans', sans-serif;

  /* Tipografía — un bloque por estilo de texto (Figma: Typography/<Grupo>/<Nivel>) */
  --mu-text-title-xl-font-family: var(--mu-font-titulo);
  --mu-text-title-xl-font-size: 4.5rem;
  --mu-text-title-xl-font-weight: 700;
  --mu-text-title-xl-line-height: 5.75rem;
  --mu-text-title-xl-letter-spacing: 0;

  --mu-text-title-lg-font-family: var(--mu-font-titulo);
  --mu-text-title-lg-font-size: 3.75rem;
  --mu-text-title-lg-font-weight: 700;
  --mu-text-title-lg-line-height: 4.75rem;
  --mu-text-title-lg-letter-spacing: 0;

  --mu-text-title-md-font-family: var(--mu-font-titulo);
  --mu-text-title-md-font-size: 3rem;
  --mu-text-title-md-font-weight: 700;
  --mu-text-title-md-line-height: 3.75rem;
  --mu-text-title-md-letter-spacing: 0;

  --mu-text-title-sm-font-family: var(--mu-font-titulo);
  --mu-text-title-sm-font-size: 2rem;
  --mu-text-title-sm-font-weight: 700;
  --mu-text-title-sm-line-height: 2.5rem;
  --mu-text-title-sm-letter-spacing: 0;

  --mu-text-subtitle-lg-font-family: var(--mu-font-titulo);
  --mu-text-subtitle-lg-font-size: 1.5rem;
  --mu-text-subtitle-lg-font-weight: 600;
  --mu-text-subtitle-lg-line-height: 2.125rem;
  --mu-text-subtitle-lg-letter-spacing: 0;

  --mu-text-subtitle-md-font-family: var(--mu-font-titulo);
  --mu-text-subtitle-md-font-size: 1.25rem;
  --mu-text-subtitle-md-font-weight: 600;
  --mu-text-subtitle-md-line-height: 1.75rem;
  --mu-text-subtitle-md-letter-spacing: 0;

  --mu-text-subtitle-sm-font-family: var(--mu-font-titulo);
  --mu-text-subtitle-sm-font-size: 1rem;
  --mu-text-subtitle-sm-font-weight: 600;
  --mu-text-subtitle-sm-line-height: 1.5rem;
  --mu-text-subtitle-sm-letter-spacing: 0;

  --mu-text-body-xl-font-family: var(--mu-font-cuerpo);
  --mu-text-body-xl-font-size: 1.25rem;
  --mu-text-body-xl-font-weight: 400;
  --mu-text-body-xl-line-height: 1.75rem;
  --mu-text-body-xl-letter-spacing: 0;

  --mu-text-body-lg-font-family: var(--mu-font-cuerpo);
  --mu-text-body-lg-font-size: 1rem;
  --mu-text-body-lg-font-weight: 400;
  --mu-text-body-lg-line-height: 1.5rem;
  --mu-text-body-lg-letter-spacing: 0;

  --mu-text-body-md-font-family: var(--mu-font-cuerpo);
  --mu-text-body-md-font-size: 0.875rem;
  --mu-text-body-md-font-weight: 400;
  --mu-text-body-md-line-height: 1.375rem;
  --mu-text-body-md-letter-spacing: 0;

  --mu-text-body-sm-font-family: var(--mu-font-cuerpo);
  --mu-text-body-sm-font-size: 0.75rem;
  --mu-text-body-sm-font-weight: 400;
  --mu-text-body-sm-line-height: 1.25rem;
  --mu-text-body-sm-letter-spacing: 0;

  --mu-text-button-lg-font-family: var(--mu-font-cuerpo);
  --mu-text-button-lg-font-size: 1.25rem;
  --mu-text-button-lg-font-weight: 600;
  --mu-text-button-lg-line-height: 1.75rem;
  --mu-text-button-lg-letter-spacing: 0;

  --mu-text-button-md-font-family: var(--mu-font-cuerpo);
  --mu-text-button-md-font-size: 1rem;
  --mu-text-button-md-font-weight: 600;
  --mu-text-button-md-line-height: 1.5rem;
  --mu-text-button-md-letter-spacing: 0;

  --mu-text-button-sm-font-family: var(--mu-font-cuerpo);
  --mu-text-button-sm-font-size: 0.875rem;
  --mu-text-button-sm-font-weight: 600;
  --mu-text-button-sm-line-height: 1.375rem;
  --mu-text-button-sm-letter-spacing: 0;

  --mu-text-label-md-font-family: var(--mu-font-cuerpo);
  --mu-text-label-md-font-size: 0.75rem;
  --mu-text-label-md-font-weight: 500;
  --mu-text-label-md-line-height: 1rem;
  --mu-text-label-md-letter-spacing: 0;

  --mu-text-label-sm-font-family: var(--mu-font-cuerpo);
  --mu-text-label-sm-font-size: 0.625rem;
  --mu-text-label-sm-font-weight: 500;
  --mu-text-label-sm-line-height: 0.875rem;
  --mu-text-label-sm-letter-spacing: 0;

  /* Radios */
  --mu-radius-xs: 0.25rem;
  --mu-radius-sm: 0.5rem;
  --mu-radius-md: 0.75rem;
  --mu-radius-lg: 1rem;
  --mu-radius-xl: 1.5rem;
  --mu-radius-xxl: 2.25rem;

  /* Grosor de borde */
  --mu-border-width-sm: 1px;
  --mu-border-width-md: 2px;

  /* Espaciado — base 4 px */
  --mu-spacing-4: 0.25rem;
  --mu-spacing-8: 0.5rem;
  --mu-spacing-12: 0.75rem;
  --mu-spacing-16: 1rem;
  --mu-spacing-20: 1.25rem;
  --mu-spacing-24: 1.5rem;
  --mu-spacing-32: 2rem;
  --mu-spacing-40: 2.5rem;
  --mu-spacing-48: 3rem;
  --mu-spacing-64: 4rem;
  --mu-spacing-80: 5rem;
  --mu-spacing-96: 6rem;

  /* Tamaños de ícono */
  --mu-icon-size-xs: 1rem;
  --mu-icon-size-sm: 1.25rem;
  --mu-icon-size-md: 1.5rem;
  --mu-icon-size-lg: 2rem;

  /* Foco — anillo de foco global (Figma: Focus/*). Todos los tokens de componente
     (--mu-button-focus-ring-*, --mu-input-focus-ring-*, …) son alias de estos. */
  --mu-focus-ring-color: var(--mu-color-purple-500);
  --mu-focus-ring-width: var(--mu-border-width-md);
  --mu-focus-ring-offset: 2px;  /* outline-offset; sin primitiva en Spacing */

  /* Sombras — color Primary/purple-900 */
  --mu-shadow-sm: 0 0.25rem 0.5rem 0 rgb(36 0 102 / 0.08);
  --mu-shadow-md: 0 0.5rem 1.5rem 0 rgb(36 0 102 / 0.08);
  --mu-shadow-lg: 0 1rem 2rem 0 rgb(36 0 102 / 0.1);
  --mu-shadow-xl: 0 1.5rem 3rem 0 rgb(36 0 102 / 0.12);

  /* Grilla — desktop */
  --mu-breakpoint-desktop: 1440px;
  --mu-grid-desktop-columns: 12;
  --mu-grid-desktop-gutter: 1.5rem;
  --mu-grid-desktop-margin: 7.5rem;
  --mu-container-max-width: 75rem;  /* 1200px: ancho de contenido = breakpoint − 2 × margen */
}

/* ===== design-system/v1/tokens.components.v1.css ===== */

/*
  Mutakit — tokens de componentes v1 (2026-10-09; fuente canónica desde 2026-10-12)

  Variables de las colecciones "Button", "Tag", "Input", "Textarea", "Control", "Badge",
  "Filter", "Tabs", "SearchHero" y "Pagination" del archivo de Figma
  "Design System Mutante" (página UI Kit). Cada una es un alias a las
  primitivas de tokens.v1.css, igual que en Figma: los nombres coinciden con
  el codeSyntax WEB de cada variable (Button/primary/default/bg →
  --mu-button-primary-default-bg).

  Depende de las primitivas de tokens.v1.css (color, radios, espaciado, borde).
  Este archivo es INPUT: se concatena con tokens.v1.css en tokens/tokens.css
  (`npm run build:tokens`), que es lo que consumen prototipos y componentes.

  Unidades: igual que tokens.v1.css — rem (1rem = 16px), bordes en px.

  Valores sin primitiva en la escala de Spacing (literales en Figma):
  Button height-lg 56, Button focus ring-offset 2, Tag default padding-x 10,
  Tag category padding-y 6.

  Excepción (2026-10-13): los colores de texto de Tag siguen lo DIBUJADO en
  Figma, no las variables de la colección "Tag" (que quedaron desactualizadas).
  Difieren 5: purple/pink/green soft-text y purple/orange solid-text.
  Desvío del dibujo: green soft-text es grey-900 (el dibujo, green-600, no se lee).

  Ver design-system/v1/README.md para las decisiones y los desvíos entre
  estas variables y lo que se dibujó a mano en Figma.
*/

:root {
  /* ===================== Button ===================== */

  /* Primary */
  --mu-button-primary-default-bg: var(--mu-color-purple-500);
  --mu-button-primary-default-text: var(--mu-color-grey-100);
  --mu-button-primary-hover-bg: var(--mu-color-purple-600);
  --mu-button-primary-hover-text: var(--mu-color-grey-100);
  --mu-button-primary-pressed-bg: var(--mu-color-purple-700);
  --mu-button-primary-pressed-text: var(--mu-color-grey-100);
  --mu-button-primary-focus-bg: var(--mu-button-primary-default-bg);
  --mu-button-primary-focus-text: var(--mu-button-primary-default-text);
  --mu-button-primary-disabled-bg: var(--mu-color-grey-300);
  --mu-button-primary-disabled-text: var(--mu-color-grey-700);

  /* Secondary (con borde) */
  --mu-button-secondary-default-bg: transparent;
  --mu-button-secondary-default-text: var(--mu-color-purple-600);
  --mu-button-secondary-default-border: var(--mu-color-purple-500);
  --mu-button-secondary-hover-bg: var(--mu-color-purple-100);
  --mu-button-secondary-hover-text: var(--mu-color-purple-700);
  --mu-button-secondary-hover-border: var(--mu-color-purple-600);
  --mu-button-secondary-pressed-bg: var(--mu-color-purple-200);
  --mu-button-secondary-pressed-text: var(--mu-color-purple-700);
  --mu-button-secondary-pressed-border: var(--mu-color-purple-700);
  --mu-button-secondary-focus-bg: var(--mu-button-secondary-default-bg);
  --mu-button-secondary-focus-text: var(--mu-button-secondary-default-text);
  --mu-button-secondary-focus-border: var(--mu-button-secondary-default-border);
  --mu-button-secondary-disabled-bg: transparent;
  --mu-button-secondary-disabled-text: var(--mu-color-grey-700);
  --mu-button-secondary-disabled-border: var(--mu-color-grey-400);

  /* Tertiary (sin fondo ni borde) */
  --mu-button-tertiary-default-bg: transparent;
  --mu-button-tertiary-default-text: var(--mu-color-purple-600);
  --mu-button-tertiary-hover-bg: var(--mu-color-purple-100);
  --mu-button-tertiary-hover-text: var(--mu-color-purple-700);
  --mu-button-tertiary-pressed-bg: var(--mu-color-purple-200);
  --mu-button-tertiary-pressed-text: var(--mu-color-purple-700);
  --mu-button-tertiary-focus-bg: var(--mu-button-tertiary-default-bg);
  --mu-button-tertiary-focus-text: var(--mu-button-tertiary-default-text);
  --mu-button-tertiary-disabled-bg: transparent;
  --mu-button-tertiary-disabled-text: var(--mu-color-grey-700);

  /* Tamaño — altura fija, el contenido se centra (no hay padding vertical) */
  --mu-button-size-xs-height: var(--mu-spacing-32);
  --mu-button-size-xs-padding-x: var(--mu-spacing-12);
  --mu-button-size-xs-icon-size: var(--mu-icon-size-xs);
  --mu-button-size-xs-gap: var(--mu-spacing-4);
  --mu-button-size-sm-height: var(--mu-spacing-40);
  --mu-button-size-sm-padding-x: var(--mu-spacing-16);
  --mu-button-size-sm-icon-size: var(--mu-icon-size-xs);
  --mu-button-size-sm-gap: var(--mu-spacing-8);
  --mu-button-size-md-height: var(--mu-spacing-48);
  --mu-button-size-md-padding-x: var(--mu-spacing-16);
  --mu-button-size-md-icon-size: var(--mu-icon-size-sm);
  --mu-button-size-md-gap: var(--mu-spacing-8);
  --mu-button-size-lg-height: 3.5rem;  /* 56px — sin primitiva en Spacing */
  --mu-button-size-lg-padding-x: var(--mu-spacing-16);
  --mu-button-size-lg-icon-size: var(--mu-icon-size-md);
  --mu-button-size-lg-gap: var(--mu-spacing-8);

  /* Forma */
  --mu-button-radius: var(--mu-radius-sm);
  --mu-button-border-width: var(--mu-border-width-md);

  /* Foco — anillo por fuera del botón (outline) */
  --mu-button-focus-ring-color: var(--mu-focus-ring-color);
  --mu-button-focus-ring-width: var(--mu-focus-ring-width);
  --mu-button-focus-ring-radius: var(--mu-radius-md);  /* radio del botón + offset + ancho = 8 + 2 + 2 */
  --mu-button-focus-ring-offset: var(--mu-focus-ring-offset);  /* outline-offset; alias del foco global (2px) */

  /* ===================== Tag ===================== */

  /* Color — suave (Type=Default): fondo hue-200; texto según el dibujo de Figma (ver README, Tag) */
  --mu-tag-purple-soft-bg: var(--mu-color-purple-200);
  --mu-tag-purple-soft-text: var(--mu-color-purple-500);
  --mu-tag-pink-soft-bg: var(--mu-color-pink-200);
  --mu-tag-pink-soft-text: var(--mu-color-pink-700);
  --mu-tag-orange-soft-bg: var(--mu-color-orange-200);
  --mu-tag-orange-soft-text: var(--mu-color-orange-800);
  --mu-tag-green-soft-bg: var(--mu-color-green-200);
  --mu-tag-green-soft-text: var(--mu-color-grey-900);  /* desvío aprobado del dibujo (green-600, contraste 1.68), 2026-10-13 */
  --mu-tag-black-soft-bg: var(--mu-color-grey-200);
  --mu-tag-black-soft-text: var(--mu-color-grey-800);

  /* Color — sólido (Type=Category y Category leaf): fondo de marca; texto blanco sobre purple, orange y black, oscuro sobre pink y green */
  --mu-tag-purple-solid-bg: var(--mu-color-purple-500);
  --mu-tag-purple-solid-text: var(--mu-color-grey-100);
  --mu-tag-pink-solid-bg: var(--mu-color-pink-400);
  --mu-tag-pink-solid-text: var(--mu-color-grey-900);
  --mu-tag-orange-solid-bg: var(--mu-color-orange-500);
  --mu-tag-orange-solid-text: var(--mu-color-grey-100);
  --mu-tag-green-solid-bg: var(--mu-color-green-500);
  --mu-tag-green-solid-text: var(--mu-color-grey-900);
  --mu-tag-black-solid-bg: var(--mu-color-grey-900);
  --mu-tag-black-solid-text: var(--mu-color-grey-100);

  /* Medidas */
  --mu-tag-default-padding-x: 0.625rem;  /* 10px — sin primitiva en Spacing */
  --mu-tag-default-padding-y: var(--mu-spacing-4);
  --mu-tag-default-radius: var(--mu-radius-lg);
  --mu-tag-category-padding-x: var(--mu-spacing-20);
  --mu-tag-category-padding-y: 0.375rem;  /* 6px — sin primitiva en Spacing */
  --mu-tag-category-radius-round: var(--mu-radius-xxl);  /* píldora: el navegador recorta al medio alto */
  --mu-tag-category-radius-leaf: var(--mu-radius-lg);    /* esquinas superior-izquierda e inferior-derecha de "leaf" */
  --mu-tag-category-radius-flat: 0;                      /* esquinas superior-derecha e inferior-izquierda de "leaf" */

  /* Medidas — Size=sm (solo Category y Category leaf): alto 30, igual que Default */
  --mu-tag-category-sm-padding-x: var(--mu-spacing-16);
  --mu-tag-category-sm-padding-y: var(--mu-spacing-4);
  --mu-tag-category-sm-radius-leaf: var(--mu-radius-md);  /* hoja en sm: 12 en vez de 16, por la proporción */

  /* ===================== Input (campo de texto, también Search y Select) ===================== */
  /* Los tokens de Input los comparten Textarea, Select, Search y Search hero (mismos colores, radio y foco). */

  --mu-input-default-bg: var(--mu-color-grey-100);
  --mu-input-default-border: var(--mu-color-grey-600);
  --mu-input-default-text: var(--mu-color-grey-900);
  --mu-input-placeholder-text: var(--mu-color-grey-700);
  --mu-input-label-text: var(--mu-color-grey-900);
  --mu-input-helper-text: var(--mu-color-grey-700);
  --mu-input-hover-border: var(--mu-color-grey-800);
  --mu-input-focus-border: var(--mu-color-purple-600);
  --mu-input-error-border: var(--mu-color-error-600);
  --mu-input-error-helper-text: var(--mu-color-error-600);
  --mu-input-disabled-bg: var(--mu-color-grey-200);
  --mu-input-disabled-border: var(--mu-color-grey-400);
  --mu-input-disabled-text: var(--mu-color-grey-700);
  --mu-input-radius: var(--mu-radius-sm);
  --mu-input-border-width: var(--mu-border-width-sm);
  --mu-input-stack-gap: var(--mu-spacing-8);
  --mu-input-helper-gap: var(--mu-spacing-4);
  --mu-input-height: var(--mu-spacing-48);
  --mu-input-padding-x: var(--mu-spacing-16);
  --mu-input-gap: var(--mu-spacing-8);
  --mu-input-icon-size: var(--mu-icon-size-sm);
  --mu-input-focus-ring-color: var(--mu-focus-ring-color);
  --mu-input-focus-ring-width: var(--mu-focus-ring-width);
  --mu-input-focus-ring-radius: var(--mu-radius-md);
  --mu-input-focus-ring-offset: var(--mu-focus-ring-offset);

  /* ===================== Textarea ===================== */
  /* Solo lo propio del campo multilínea; el resto son los tokens de Input. */

  --mu-textarea-min-height: var(--mu-spacing-96);
  --mu-textarea-padding-y: var(--mu-spacing-12);

  /* ===================== Control (Checkbox, Radio, Toggle y sus grupos) ===================== */
  /* Tokens compartidos por las casillas, los botones de opción y el interruptor. */

  --mu-control-size: var(--mu-spacing-20);
  --mu-control-icon-size: var(--mu-icon-size-xs);
  --mu-control-gap: var(--mu-spacing-12);
  --mu-control-text-gap: var(--mu-spacing-4);
  --mu-control-radius: var(--mu-radius-xs);
  --mu-control-border-width: var(--mu-border-width-sm);
  --mu-control-default-bg: var(--mu-color-grey-100);
  --mu-control-default-border: var(--mu-color-grey-600);
  --mu-control-hover-bg: var(--mu-color-purple-100);
  --mu-control-hover-border: var(--mu-color-purple-500);
  --mu-control-checked-bg: var(--mu-color-purple-500);
  --mu-control-checked-border: var(--mu-color-purple-500);
  --mu-control-checked-icon: var(--mu-color-grey-100);
  --mu-control-checked-hover-bg: var(--mu-color-purple-600);
  --mu-control-checked-hover-border: var(--mu-color-purple-600);
  --mu-control-error-border: var(--mu-color-error-600);
  --mu-control-error-checked-bg: var(--mu-color-error-600);
  --mu-control-error-helper-text: var(--mu-color-error-600);
  --mu-control-disabled-bg: var(--mu-color-grey-200);
  --mu-control-disabled-border: var(--mu-color-grey-400);
  --mu-control-disabled-checked-bg: var(--mu-color-grey-400);
  --mu-control-disabled-text: var(--mu-color-grey-700);
  --mu-control-label-text: var(--mu-color-grey-900);
  --mu-control-helper-text: var(--mu-color-grey-700);
  --mu-control-radio-dot-size: var(--mu-spacing-8);
  --mu-control-toggle-width: var(--mu-spacing-40);
  --mu-control-toggle-height: var(--mu-spacing-24);
  --mu-control-toggle-padding: var(--mu-spacing-4);
  --mu-control-toggle-thumb-size: var(--mu-spacing-16);
  --mu-control-toggle-radius: var(--mu-radius-xxl);
  --mu-control-toggle-off-bg: var(--mu-color-grey-600);
  --mu-control-toggle-off-hover-bg: var(--mu-color-grey-700);
  --mu-control-toggle-on-bg: var(--mu-color-purple-500);
  --mu-control-toggle-on-hover-bg: var(--mu-color-purple-600);
  --mu-control-toggle-disabled-off-bg: var(--mu-color-grey-300);
  --mu-control-toggle-disabled-on-bg: var(--mu-color-grey-400);
  --mu-control-toggle-thumb: var(--mu-color-grey-100);
  --mu-control-focus-ring-color: var(--mu-focus-ring-color);
  --mu-control-focus-ring-width: var(--mu-focus-ring-width);
  --mu-control-focus-ring-radius: var(--mu-radius-sm);
  --mu-control-row-height: var(--mu-spacing-24);
  --mu-control-radio-radius: var(--mu-radius-xxl);
  --mu-control-radio-dot: var(--mu-color-grey-100);
  --mu-control-group-gap: var(--mu-spacing-12);
  --mu-control-group-gap-horizontal: var(--mu-spacing-24);
  --mu-control-group-legend-gap: var(--mu-spacing-8);

  /* ===================== Badge (contador) ===================== */

  --mu-badge-height: var(--mu-spacing-24);
  --mu-badge-padding-x: var(--mu-spacing-8);
  --mu-badge-radius: var(--mu-radius-xxl);
  --mu-badge-border-width: var(--mu-border-width-sm);
  --mu-badge-neutral-bg: var(--mu-color-grey-200);
  --mu-badge-neutral-text: var(--mu-color-grey-800);
  --mu-badge-brand-bg: var(--mu-color-purple-500);
  --mu-badge-brand-text: var(--mu-color-grey-100);
  --mu-badge-outline-border: var(--mu-color-purple-600);
  --mu-badge-outline-text: var(--mu-color-purple-700);

  /* ===================== Filter (selector, menú, opciones, chip y chip aplicado) ===================== */

  --mu-filter-select-default-bg: var(--mu-color-grey-100);
  --mu-filter-select-default-border: var(--mu-color-grey-600);
  --mu-filter-select-default-text: var(--mu-color-grey-900);
  --mu-filter-select-default-icon: var(--mu-color-grey-700);
  --mu-filter-select-hover-border: var(--mu-color-grey-800);
  --mu-filter-select-focus-border: var(--mu-color-purple-600);
  --mu-filter-select-open-border: var(--mu-color-purple-600);
  --mu-filter-select-disabled-bg: var(--mu-color-grey-200);
  --mu-filter-select-disabled-border: var(--mu-color-grey-400);
  --mu-filter-select-disabled-text: var(--mu-color-grey-700);
  --mu-filter-select-height: var(--mu-spacing-48);
  --mu-filter-select-padding-x: var(--mu-spacing-16);
  --mu-filter-select-gap: var(--mu-spacing-8);
  --mu-filter-select-icon-size: var(--mu-icon-size-sm);
  --mu-filter-radius: var(--mu-radius-sm);
  --mu-filter-border-width: var(--mu-border-width-sm);
  --mu-filter-selected-border-width: var(--mu-border-width-md);
  --mu-filter-chip-default-bg: var(--mu-color-grey-100);
  --mu-filter-chip-default-border: var(--mu-color-grey-600);
  --mu-filter-chip-default-text: var(--mu-color-grey-900);
  --mu-filter-chip-default-badge-bg: var(--mu-color-grey-200);
  --mu-filter-chip-default-badge-text: var(--mu-color-grey-800);
  --mu-filter-chip-hover-bg: var(--mu-color-purple-100);
  --mu-filter-chip-hover-border: var(--mu-color-purple-600);
  --mu-filter-chip-selected-bg: var(--mu-color-grey-100);
  --mu-filter-chip-selected-border: var(--mu-color-purple-500);
  --mu-filter-chip-selected-text: var(--mu-color-purple-600);
  --mu-filter-chip-selected-badge-bg: var(--mu-color-purple-500);
  --mu-filter-chip-selected-badge-text: var(--mu-color-grey-100);
  --mu-filter-chip-disabled-bg: var(--mu-color-grey-200);
  --mu-filter-chip-disabled-border: var(--mu-color-grey-400);
  --mu-filter-chip-disabled-text: var(--mu-color-grey-700);
  --mu-filter-chip-disabled-badge-bg: var(--mu-color-grey-300);
  --mu-filter-chip-disabled-badge-text: var(--mu-color-grey-700);
  --mu-filter-chip-height: var(--mu-spacing-48);
  --mu-filter-chip-padding-x: var(--mu-spacing-16);
  --mu-filter-chip-gap: var(--mu-spacing-8);
  --mu-filter-badge-height: var(--mu-spacing-24);
  --mu-filter-badge-padding-x: var(--mu-spacing-8);
  --mu-filter-badge-radius: var(--mu-radius-xxl);
  --mu-filter-focus-ring-color: var(--mu-focus-ring-color);
  --mu-filter-focus-ring-width: var(--mu-focus-ring-width);
  --mu-filter-focus-ring-radius: var(--mu-radius-md);
  --mu-filter-menu-bg: var(--mu-color-grey-100);
  --mu-filter-menu-border: var(--mu-color-grey-300);
  --mu-filter-menu-radius: var(--mu-radius-md);
  --mu-filter-menu-border-width: var(--mu-border-width-sm);
  --mu-filter-menu-padding: var(--mu-spacing-8);
  --mu-filter-menu-gap: var(--mu-spacing-4);
  --mu-filter-option-default-text: var(--mu-color-grey-900);
  --mu-filter-option-hover-bg: var(--mu-color-grey-200);
  --mu-filter-option-selected-bg: var(--mu-color-purple-100);
  --mu-filter-option-selected-text: var(--mu-color-purple-700);
  --mu-filter-option-selected-icon: var(--mu-color-purple-700);
  --mu-filter-option-disabled-text: var(--mu-color-grey-700);
  --mu-filter-option-height: var(--mu-spacing-40);
  --mu-filter-option-padding-x: var(--mu-spacing-12);
  --mu-filter-option-gap: var(--mu-spacing-8);
  --mu-filter-option-radius: var(--mu-radius-sm);
  --mu-filter-chip-hover-text: var(--mu-color-purple-700);
  --mu-filter-chip-hover-badge-border: var(--mu-color-purple-600);
  --mu-filter-chip-hover-badge-text: var(--mu-color-purple-700);
  --mu-filter-applied-default-bg: var(--mu-color-purple-100);
  --mu-filter-applied-default-border: var(--mu-color-purple-200);
  --mu-filter-applied-default-text: var(--mu-color-purple-700);
  --mu-filter-applied-default-icon: var(--mu-color-purple-700);
  --mu-filter-applied-hover-bg: var(--mu-color-purple-200);
  --mu-filter-applied-hover-border: var(--mu-color-purple-400);
  --mu-filter-applied-disabled-bg: var(--mu-color-grey-200);
  --mu-filter-applied-disabled-border: var(--mu-color-grey-400);
  --mu-filter-applied-disabled-text: var(--mu-color-grey-700);
  --mu-filter-applied-height: var(--mu-spacing-32);
  --mu-filter-applied-padding-x: var(--mu-spacing-12);
  --mu-filter-applied-gap: var(--mu-spacing-8);
  --mu-filter-applied-icon-size: var(--mu-icon-size-xs);

  /* ===================== Tabs (tab y barra de tabs) ===================== */

  --mu-tabs-default-text: var(--mu-color-grey-900);
  --mu-tabs-hover-bg: var(--mu-color-purple-100);
  --mu-tabs-selected-text: var(--mu-color-purple-600);
  --mu-tabs-selected-indicator: var(--mu-color-purple-600);
  --mu-tabs-disabled-text: var(--mu-color-grey-700);
  --mu-tabs-divider-color: var(--mu-color-grey-500);
  --mu-tabs-divider-width: var(--mu-border-width-sm);
  --mu-tabs-indicator-width: var(--mu-border-width-md);
  --mu-tabs-height: var(--mu-spacing-48);
  --mu-tabs-padding-x: var(--mu-spacing-16);
  --mu-tabs-bar-gap: var(--mu-spacing-8);
  --mu-tabs-radius: var(--mu-radius-sm);
  --mu-tabs-focus-ring-color: var(--mu-focus-ring-color);
  --mu-tabs-focus-ring-width: var(--mu-focus-ring-width);
  --mu-tabs-pill-height: var(--mu-spacing-40);
  --mu-tabs-gap: var(--mu-spacing-8);
  --mu-tabs-arrow-bg: var(--mu-color-grey-100);

  /* ===================== Search hero (búsqueda principal de Mutabase) ===================== */

  --mu-search-hero-default-text: var(--mu-color-grey-900);
  --mu-search-hero-placeholder-text: var(--mu-color-grey-700);
  --mu-search-hero-default-underline: var(--mu-color-grey-900);
  --mu-search-hero-hover-underline: var(--mu-color-purple-500);
  --mu-search-hero-focus-underline: var(--mu-color-purple-600);
  --mu-search-hero-underline-width: var(--mu-border-width-md);
  --mu-search-hero-focus-underline-width: var(--mu-spacing-4);
  --mu-search-hero-padding-y: var(--mu-spacing-12);
  --mu-search-hero-gap: var(--mu-spacing-16);

  /* ===================== Pagination (ítem de página y barra) ===================== */

  --mu-pagination-size: var(--mu-spacing-40);
  --mu-pagination-padding-x: var(--mu-spacing-8);
  --mu-pagination-gap: var(--mu-spacing-8);
  --mu-pagination-radius: var(--mu-radius-sm);
  --mu-pagination-icon-size: var(--mu-icon-size-sm);
  --mu-pagination-default-text: var(--mu-color-grey-900);
  --mu-pagination-default-icon: var(--mu-color-grey-900);
  --mu-pagination-hover-bg: var(--mu-color-purple-100);
  --mu-pagination-selected-bg: var(--mu-color-purple-500);
  --mu-pagination-selected-text: var(--mu-color-grey-100);
  --mu-pagination-disabled-text: var(--mu-color-grey-700);
  --mu-pagination-disabled-icon: var(--mu-color-grey-700);
  --mu-pagination-ellipsis-icon: var(--mu-color-grey-700);
  --mu-pagination-compact-text: var(--mu-color-grey-900);
  --mu-pagination-focus-ring-radius: var(--mu-radius-md);
  --mu-pagination-focus-ring-color: var(--mu-focus-ring-color);
  --mu-pagination-focus-ring-width: var(--mu-focus-ring-width);
}

/* ===== design-system/v1/tokens.legacy.css ===== */

/*
  Mutakit — nombres heredados (deprecados, 2026-10-12)

  Los nombres que tenía tokens.css antes del sistema v1. Se mantienen solo para
  no romper lo que ya los usa.
  No usarlos en nada nuevo: usar los tokens --mu-color-* y --mu-text-* de v1.

  Donde el color existe tal cual en las escalas de v1, el nombre heredado es
  un alias. Donde no existe (negro, grises de fondo y borde, textos), se
  conserva el valor literal anterior para no cambiar nada visualmente; la
  equivalencia más cercana en v1 va en el comentario. Quitarlos es un
  breaking change: sale en una versión mayor.

  --mu-font-titulo y --mu-font-cuerpo no están acá: siguen vigentes y se
  definen en tokens.v1.css.
*/

:root {
  /* Alias exactos a v1 */
  --mu-morado: var(--mu-color-purple-500);   /* #9D67FF */
  --mu-rosado: var(--mu-color-pink-400);     /* #FFD4FC */
  --mu-naranja: var(--mu-color-orange-500);  /* #FB6200 */
  --mu-verde: var(--mu-color-green-500);     /* #AFF757 */
  --mu-blanco: var(--mu-color-grey-100);     /* #FFFFFF */

  /* Sin equivalente exacto en v1 — valor anterior */
  --mu-negro: #0a0a0a;              /* más cercano: grey-900 #1A1A1A */
  --mu-gris-fondo: #F7F7F5;         /* más cercano: grey-200 #F2F2F2 */
  --mu-gris-borde: #E4E4E0;         /* más cercano: grey-300 #E6E6E6 */
  --mu-texto-principal: #111111;    /* más cercano: grey-900 #1A1A1A */
  --mu-texto-secundario: #555555;   /* entre grey-700 #737373 y grey-800 #404040 */
}