@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/tokens/default.json

@@ -0,0 +1,1802 @@
+{
+ "name": "Barbershop default",
+ "version": 2,
+ "color": {
+  "themes": [
+   {
+    "id": "light",
+    "name": "Claro"
+   },
+   {
+    "id": "dark",
+    "name": "Oscuro AMOLED"
+   }
+  ],
+  "tokens": [
+   {
+    "name": "bg",
+    "value": {
+     "light": "#f4f4f8",
+     "dark": "#000000"
+    },
+    "usage": "Fondo de la página. En oscuro es negro puro: en pantallas AMOLED esos píxeles quedan apagados."
+   },
+   {
+    "name": "surface",
+    "value": {
+     "light": "#ffffff",
+     "dark": "#0e0e10"
+    },
+    "usage": "Tarjetas, barra lateral, campos y filas. En oscuro va apenas encendida sobre el negro."
+   },
+   {
+    "name": "surface-2",
+    "value": {
+     "light": "#eeeef1",
+     "dark": "#1a1a1d"
+    },
+    "usage": "Fila en hover, chip neutro y relleno de controles dentro de una tarjeta."
+   },
+   {
+    "name": "sunken",
+    "value": {
+     "light": "#e7e7ed",
+     "dark": "#232327"
+    },
+    "usage": "Fondo hundido: avatar neutro y zonas de arrastre."
+   },
+   {
+    "name": "float",
+    "value": {
+     "light": "#ffffff",
+     "dark": "#141417"
+    },
+    "usage": "Lo que flota sobre la página: diálogos, hojas, menús y la barra inferior de la app. En oscuro va un paso más clara que surface, porque ahí no hay sombras."
+   },
+   {
+    "name": "line",
+    "value": {
+     "light": "#e3e3e6",
+     "dark": "#1f1f23"
+    },
+    "usage": "Líneas divisorias, borde de chips sin relleno y de bloques apagados. Decorativa: no delimita controles."
+   },
+   {
+    "name": "line-strong",
+    "value": {
+     "light": "#d2d2dc",
+     "dark": "#303036"
+    },
+    "usage": "Borde de bloques de cita y de botones de muestra. No llega a 3:1: el elemento se distingue por su relleno y su texto."
+   },
+   {
+    "name": "line-control",
+    "value": {
+     "light": "#85858f",
+     "dark": "#6e6e7a"
+    },
+    "usage": "Borde de campos de texto, selects y casillas. Da 3.7:1 sobre surface en claro y 3.8:1 en oscuro."
+   },
+   {
+    "name": "hair",
+    "value": {
+     "light": "rgba(0,0,0,.11)",
+     "dark": "rgba(255,255,255,.10)"
+    },
+    "usage": "Filete de 0.67 px que rodea tarjetas y botones secundarios. Va dentro de shadow-flat y shadow-hero."
+   },
+   {
+    "name": "track",
+    "value": {
+     "light": "#dedee2",
+     "dark": "#232327"
+    },
+    "usage": "Pista de barras de avance y de nivel de stock."
+   },
+   {
+    "name": "seg-track",
+    "value": {
+     "light": "#e7e7ed",
+     "dark": "#151518"
+    },
+    "usage": "Bandeja del control segmentado."
+   },
+   {
+    "name": "seg-on",
+    "value": {
+     "light": "#ffffff",
+     "dark": "#2b2b30"
+    },
+    "usage": "Opción elegida del control segmentado. Es neutra: el color de marca no se usa para selectores."
+   },
+   {
+    "name": "ink",
+    "value": {
+     "light": "#000000",
+     "dark": "#f2f2f5"
+    },
+    "usage": "Texto principal. En oscuro es un blanco roto para que no deslumbre sobre negro."
+   },
+   {
+    "name": "ink-2",
+    "value": {
+     "light": "#4b4b57",
+     "dark": "#b6b6c1"
+    },
+    "usage": "Texto secundario y etiquetas, sobre cualquier superficie."
+   },
+   {
+    "name": "ink-3",
+    "value": {
+     "light": "#6d6d7a",
+     "dark": "#8c8c98"
+    },
+    "usage": "Metadatos y encabezados de tabla, sobre bg y surface (4.6:1 sobre bg en claro). Sobre surface-2 usa ink-2."
+   },
+   {
+    "name": "accent",
+    "value": {
+     "light": "#faa2a2",
+     "dark": "#faa2a2"
+    },
+    "usage": "Relleno de marca: la acción principal y lo elegido (día, hora, turno que sigue). Es un pastel y no sirve como color de texto. Por defecto es Coral."
+   },
+   {
+    "name": "on-accent",
+    "value": {
+     "light": "#3f191a",
+     "dark": "#3f191a"
+    },
+    "usage": "Texto e iconos sobre un relleno accent: el tono profundo del mismo matiz (7.9:1). Igual en claro y en oscuro."
+   },
+   {
+    "name": "accent-ink",
+    "value": {
+     "light": "#a43a41",
+     "dark": "#ffb4b3"
+    },
+    "usage": "Texto e iconos en color de marca, foco de teclado y elemento activo de navegación. Da 6.4:1 sobre surface en claro y 11.4:1 en oscuro."
+   },
+   {
+    "name": "accent-word",
+    "value": {
+     "light": "#dc5d63",
+     "dark": "#faa2a2"
+    },
+    "usage": "La palabra en color de un título grande y el interruptor encendido. Da 3.3:1 sobre bg: solo para texto de 24 px o más."
+   },
+   {
+    "name": "accent-soft",
+    "value": {
+     "light": "#ffebea",
+     "dark": "#261112"
+    },
+    "usage": "Fondo suave de marca: cita en atención, ítem activo de navegación, aviso informativo."
+   },
+   {
+    "name": "accent-line",
+    "value": {
+     "light": "#f6c2c1",
+     "dark": "#5b2e2f"
+    },
+    "usage": "Filete de marca: borde de la cita en atención y de la tarjeta que resume lo que se está reservando."
+   },
+   {
+    "name": "accent-2",
+    "value": {
+     "light": "#fec79e",
+     "dark": "#fec79e"
+    },
+    "usage": "Tono vecino, 38° más allá en el círculo de color. Solo para el degradado detrás de la rueda de hora."
+   },
+   {
+    "name": "pal-durazno-fill",
+    "value": {
+     "light": "#efae75",
+     "dark": "#efae75"
+    },
+    "usage": "Paleta Durazno: relleno. Reemplaza a accent con data-accent=\"durazno\"."
+   },
+   {
+    "name": "pal-durazno-deep",
+    "value": {
+     "light": "#3b1f02",
+     "dark": "#3b1f02"
+    },
+    "usage": "Paleta Durazno: texto sobre el relleno. Reemplaza a on-accent con data-accent=\"durazno\"."
+   },
+   {
+    "name": "pal-durazno-ink",
+    "value": {
+     "light": "#905203",
+     "dark": "#f6be8e"
+    },
+    "usage": "Paleta Durazno: texto en color. Reemplaza a accent-ink con data-accent=\"durazno\"."
+   },
+   {
+    "name": "pal-durazno-word",
+    "value": {
+     "light": "#c97405",
+     "dark": "#efae75"
+    },
+    "usage": "Paleta Durazno: palabra de título. Reemplaza a accent-word con data-accent=\"durazno\"."
+   },
+   {
+    "name": "pal-durazno-soft",
+    "value": {
+     "light": "#ffecde",
+     "dark": "#241406"
+    },
+    "usage": "Paleta Durazno: fondo suave. Reemplaza a accent-soft con data-accent=\"durazno\"."
+   },
+   {
+    "name": "pal-durazno-line",
+    "value": {
+     "light": "#eec9a9",
+     "dark": "#553515"
+    },
+    "usage": "Paleta Durazno: filete. Reemplaza a accent-line con data-accent=\"durazno\"."
+   },
+   {
+    "name": "pal-durazno-2",
+    "value": {
+     "light": "#e1d695",
+     "dark": "#e1d695"
+    },
+    "usage": "Paleta Durazno: tono vecino. Reemplaza a accent-2 con data-accent=\"durazno\"."
+   },
+   {
+    "name": "pal-menta-fill",
+    "value": {
+     "light": "#77d3ad",
+     "dark": "#77d3ad"
+    },
+    "usage": "Paleta Menta: relleno. Reemplaza a accent con data-accent=\"menta\"."
+   },
+   {
+    "name": "pal-menta-deep",
+    "value": {
+     "light": "#002f1f",
+     "dark": "#002f1f"
+    },
+    "usage": "Paleta Menta: texto sobre el relleno. Reemplaza a on-accent con data-accent=\"menta\"."
+   },
+   {
+    "name": "pal-menta-ink",
+    "value": {
+     "light": "#047554",
+     "dark": "#91debc"
+    },
+    "usage": "Paleta Menta: texto en color. Reemplaza a accent-ink con data-accent=\"menta\"."
+   },
+   {
+    "name": "pal-menta-word",
+    "value": {
+     "light": "#03a578",
+     "dark": "#77d3ad"
+    },
+    "usage": "Paleta Menta: palabra de título. Reemplaza a accent-word con data-accent=\"menta\"."
+   },
+   {
+    "name": "pal-menta-soft",
+    "value": {
+     "light": "#e0f7eb",
+     "dark": "#061d14"
+    },
+    "usage": "Paleta Menta: fondo suave. Reemplaza a accent-soft con data-accent=\"menta\"."
+   },
+   {
+    "name": "pal-menta-line",
+    "value": {
+     "light": "#addec7",
+     "dark": "#134834"
+    },
+    "usage": "Paleta Menta: filete. Reemplaza a accent-line con data-accent=\"menta\"."
+   },
+   {
+    "name": "pal-menta-2",
+    "value": {
+     "light": "#8ee5ed",
+     "dark": "#8ee5ed"
+    },
+    "usage": "Paleta Menta: tono vecino. Reemplaza a accent-2 con data-accent=\"menta\"."
+   },
+   {
+    "name": "pal-cielo-fill",
+    "value": {
+     "light": "#76c9f8",
+     "dark": "#76c9f8"
+    },
+    "usage": "Paleta Cielo: relleno. Reemplaza a accent con data-accent=\"cielo\"."
+   },
+   {
+    "name": "pal-cielo-deep",
+    "value": {
+     "light": "#002a3e",
+     "dark": "#002a3e"
+    },
+    "usage": "Paleta Cielo: texto sobre el relleno. Reemplaza a on-accent con data-accent=\"cielo\"."
+   },
+   {
+    "name": "pal-cielo-ink",
+    "value": {
+     "light": "#006c97",
+     "dark": "#8fd5fd"
+    },
+    "usage": "Paleta Cielo: texto en color. Reemplaza a accent-ink con data-accent=\"cielo\"."
+   },
+   {
+    "name": "pal-cielo-word",
+    "value": {
+     "light": "#0097d2",
+     "dark": "#76c9f8"
+    },
+    "usage": "Paleta Cielo: palabra de título. Reemplaza a accent-word con data-accent=\"cielo\"."
+   },
+   {
+    "name": "pal-cielo-soft",
+    "value": {
+     "light": "#e1f3fe",
+     "dark": "#061b26"
+    },
+    "usage": "Paleta Cielo: fondo suave. Reemplaza a accent-soft con data-accent=\"cielo\"."
+   },
+   {
+    "name": "pal-cielo-line",
+    "value": {
+     "light": "#abd8f3",
+     "dark": "#12425a"
+    },
+    "usage": "Paleta Cielo: filete. Reemplaza a accent-line con data-accent=\"cielo\"."
+   },
+   {
+    "name": "pal-cielo-2",
+    "value": {
+     "light": "#c6d2ff",
+     "dark": "#c6d2ff"
+    },
+    "usage": "Paleta Cielo: tono vecino. Reemplaza a accent-2 con data-accent=\"cielo\"."
+   },
+   {
+    "name": "pal-lavanda-fill",
+    "value": {
+     "light": "#bab3fe",
+     "dark": "#bab3fe"
+    },
+    "usage": "Paleta Lavanda: relleno. Reemplaza a accent con data-accent=\"lavanda\"."
+   },
+   {
+    "name": "pal-lavanda-deep",
+    "value": {
+     "light": "#252142",
+     "dark": "#252142"
+    },
+    "usage": "Paleta Lavanda: texto sobre el relleno. Reemplaza a on-accent con data-accent=\"lavanda\"."
+   },
+   {
+    "name": "pal-lavanda-ink",
+    "value": {
+     "light": "#6152ad",
+     "dark": "#c7c2ff"
+    },
+    "usage": "Paleta Lavanda: texto en color. Reemplaza a accent-ink con data-accent=\"lavanda\"."
+   },
+   {
+    "name": "pal-lavanda-word",
+    "value": {
+     "light": "#8979e6",
+     "dark": "#bab3fe"
+    },
+    "usage": "Paleta Lavanda: palabra de título. Reemplaza a accent-word con data-accent=\"lavanda\"."
+   },
+   {
+    "name": "pal-lavanda-soft",
+    "value": {
+     "light": "#efeeff",
+     "dark": "#171627"
+    },
+    "usage": "Paleta Lavanda: fondo suave. Reemplaza a accent-soft con data-accent=\"lavanda\"."
+   },
+   {
+    "name": "pal-lavanda-line",
+    "value": {
+     "light": "#cecbf7",
+     "dark": "#3c375d"
+    },
+    "usage": "Paleta Lavanda: filete. Reemplaza a accent-line con data-accent=\"lavanda\"."
+   },
+   {
+    "name": "pal-lavanda-2",
+    "value": {
+     "light": "#f2c1f3",
+     "dark": "#f2c1f3"
+    },
+    "usage": "Paleta Lavanda: tono vecino. Reemplaza a accent-2 con data-accent=\"lavanda\"."
+   },
+   {
+    "name": "pal-orquidea-fill",
+    "value": {
+     "light": "#eaa3d5",
+     "dark": "#eaa3d5"
+    },
+    "usage": "Paleta Orquídea: relleno. Reemplaza a accent con data-accent=\"orquidea\"."
+   },
+   {
+    "name": "pal-orquidea-deep",
+    "value": {
+     "light": "#391a31",
+     "dark": "#391a31"
+    },
+    "usage": "Paleta Orquídea: texto sobre el relleno. Reemplaza a on-accent con data-accent=\"orquidea\"."
+   },
+   {
+    "name": "pal-orquidea-ink",
+    "value": {
+     "light": "#933e7f",
+     "dark": "#f2b4df"
+    },
+    "usage": "Paleta Orquídea: texto en color. Reemplaza a accent-ink con data-accent=\"orquidea\"."
+   },
+   {
+    "name": "pal-orquidea-word",
+    "value": {
+     "light": "#c861ad",
+     "dark": "#eaa3d5"
+    },
+    "usage": "Paleta Orquídea: palabra de título. Reemplaza a accent-word con data-accent=\"orquidea\"."
+   },
+   {
+    "name": "pal-orquidea-soft",
+    "value": {
+     "light": "#fee9f7",
+     "dark": "#23121e"
+    },
+    "usage": "Paleta Orquídea: fondo suave. Reemplaza a accent-soft con data-accent=\"orquidea\"."
+   },
+   {
+    "name": "pal-orquidea-line",
+    "value": {
+     "light": "#ecc2df",
+     "dark": "#532f49"
+    },
+    "usage": "Paleta Orquídea: filete. Reemplaza a accent-line con data-accent=\"orquidea\"."
+   },
+   {
+    "name": "pal-orquidea-2",
+    "value": {
+     "light": "#fec2c5",
+     "dark": "#fec2c5"
+    },
+    "usage": "Paleta Orquídea: tono vecino. Reemplaza a accent-2 con data-accent=\"orquidea\"."
+   },
+   {
+    "name": "pal-grafito-fill",
+    "value": {
+     "light": "#26262b",
+     "dark": "#ececf0"
+    },
+    "usage": "Paleta Grafito: relleno. Reemplaza a accent con data-accent=\"grafito\"."
+   },
+   {
+    "name": "pal-grafito-deep",
+    "value": {
+     "light": "#ffffff",
+     "dark": "#1a1a1e"
+    },
+    "usage": "Paleta Grafito: texto sobre el relleno. Reemplaza a on-accent con data-accent=\"grafito\"."
+   },
+   {
+    "name": "pal-grafito-ink",
+    "value": {
+     "light": "#26262b",
+     "dark": "#ececf0"
+    },
+    "usage": "Paleta Grafito: texto en color. Reemplaza a accent-ink con data-accent=\"grafito\"."
+   },
+   {
+    "name": "pal-grafito-word",
+    "value": {
+     "light": "#8a8a94",
+     "dark": "#a3a3ad"
+    },
+    "usage": "Paleta Grafito: palabra de título. Reemplaza a accent-word con data-accent=\"grafito\"."
+   },
+   {
+    "name": "pal-grafito-soft",
+    "value": {
+     "light": "#ececf0",
+     "dark": "#1d1d21"
+    },
+    "usage": "Paleta Grafito: fondo suave. Reemplaza a accent-soft con data-accent=\"grafito\"."
+   },
+   {
+    "name": "pal-grafito-line",
+    "value": {
+     "light": "#c6c6cf",
+     "dark": "#3a3a42"
+    },
+    "usage": "Paleta Grafito: filete. Reemplaza a accent-line con data-accent=\"grafito\"."
+   },
+   {
+    "name": "pal-grafito-2",
+    "value": {
+     "light": "#b9b9c6",
+     "dark": "#5a5a66"
+    },
+    "usage": "Paleta Grafito: tono vecino. Reemplaza a accent-2 con data-accent=\"grafito\"."
+   },
+   {
+    "name": "danger",
+    "value": {
+     "light": "#c51f1c",
+     "dark": "#ff9689"
+    },
+    "usage": "Error, ausencia y stock bajo el mínimo. Como texto, sobre surface y danger-soft. Más saturado que Coral para no confundirse con la marca."
+   },
+   {
+    "name": "danger-soft",
+    "value": {
+     "light": "#ffebe8",
+     "dark": "#300f0b"
+    },
+    "usage": "Fondo de la cita con ausencia y del chip de error."
+   },
+   {
+    "name": "warning",
+    "value": {
+     "light": "#865900",
+     "dark": "#ebc166"
+    },
+    "usage": "Algo que pide atención hoy: cliente que llegó y espera, stock cerca del mínimo."
+   },
+   {
+    "name": "warning-soft",
+    "value": {
+     "light": "#feefcf",
+     "dark": "#241900"
+    },
+    "usage": "Fondo de la cita cuyo cliente ya llegó y del chip de aviso."
+   },
+   {
+    "name": "success",
+    "value": {
+     "light": "#0b7643",
+     "dark": "#80dba2"
+    },
+    "usage": "Terminado y en nivel. Solo comunica estado."
+   },
+   {
+    "name": "success-soft",
+    "value": {
+     "light": "#dff8e6",
+     "dark": "#062111"
+    },
+    "usage": "Fondo del chip de éxito y del aviso de proceso cerrado."
+   },
+   {
+    "name": "hatch",
+    "value": {
+     "light": "#e6e6ec",
+     "dark": "#1b1b1f"
+    },
+    "usage": "Trama diagonal: tiempo que no se puede reservar (fuera de horario, descanso, hora ocupada, reposo de un servicio)."
+   },
+   {
+    "name": "scrim",
+    "value": {
+     "light": "rgba(0,0,0,.2)",
+     "dark": "rgba(0,0,0,.72)"
+    },
+    "usage": "Velo detrás de diálogos y hojas."
+   },
+   {
+    "name": "toast-bg",
+    "value": {
+     "light": "#000000",
+     "dark": "#222226"
+    },
+    "usage": "Fondo del aviso breve. En oscuro es un gris, no blanco: sería lo más brillante de la pantalla."
+   },
+   {
+    "name": "toast-ink",
+    "value": {
+     "light": "#ffffff",
+     "dark": "#f2f2f5"
+    },
+    "usage": "Texto y botón del aviso breve."
+   },
+   {
+    "name": "chart-cat-1",
+    "value": {
+     "light": "#2f7fc1",
+     "dark": "#6db8f2"
+    },
+    "usage": "Gráficos: color de la serie 2 (Azul cielo). La serie 1 siempre usa accent-word; las demás siguen este orden."
+   },
+   {
+    "name": "chart-cat-2",
+    "value": {
+     "light": "#12936f",
+     "dark": "#5fd0a6"
+    },
+    "usage": "Gráficos: color de la serie 3 (Verde menta). La serie 1 siempre usa accent-word; las demás siguen este orden."
+   },
+   {
+    "name": "chart-cat-3",
+    "value": {
+     "light": "#c7820f",
+     "dark": "#f0b85a"
+    },
+    "usage": "Gráficos: color de la serie 4 (Ámbar). La serie 1 siempre usa accent-word; las demás siguen este orden."
+   },
+   {
+    "name": "chart-cat-4",
+    "value": {
+     "light": "#6d5bd8",
+     "dark": "#aea3fb"
+    },
+    "usage": "Gráficos: color de la serie 5 (Lavanda). La serie 1 siempre usa accent-word; las demás siguen este orden."
+   },
+   {
+    "name": "chart-cat-5",
+    "value": {
+     "light": "#bd4b95",
+     "dark": "#ee9bd2"
+    },
+    "usage": "Gráficos: color de la serie 6 (Orquídea). La serie 1 siempre usa accent-word; las demás siguen este orden."
+   },
+   {
+    "name": "chart-cat-6",
+    "value": {
+     "light": "#5f6b7d",
+     "dark": "#a5aebb"
+    },
+    "usage": "Gráficos: color de la serie 7 (Pizarra). La serie 1 siempre usa accent-word; las demás siguen este orden."
+   },
+   {
+    "name": "chart-cat-7",
+    "value": {
+     "light": "#788f22",
+     "dark": "#bcd56b"
+    },
+    "usage": "Gráficos: color de la serie 8 (Oliva). La serie 1 siempre usa accent-word; las demás siguen este orden."
+   },
+   {
+    "name": "chart-cat-reserve",
+    "value": {
+     "light": "#dc5d63",
+     "dark": "#f48f93"
+    },
+    "usage": "Color de categoría de reserva: reemplaza al color de categoría que se parece al acento activo (ver chartSwaps)."
+   },
+   {
+    "name": "chart-grid",
+    "value": {
+     "light": "rgba(0,0,0,.06)",
+     "dark": "rgba(255,255,255,.07)"
+    },
+    "usage": "Gráficos: líneas guía del fondo. Más suaves que line para que los datos manden."
+   },
+   {
+    "name": "chart-crosshair",
+    "value": {
+     "light": "rgba(0,0,0,.30)",
+     "dark": "rgba(255,255,255,.34)"
+    },
+    "usage": "Gráficos: línea vertical que sigue al puntero y franja de la categoría en barras."
+   },
+   {
+    "name": "chart-up",
+    "value": {
+     "light": "#0f8a55",
+     "dark": "#5fd69b"
+    },
+    "usage": "Gráficos: valor que sube (vela alcista, aumento en cascada, línea ascendente). Verde propio, distinto de la serie Verde menta."
+   },
+   {
+    "name": "chart-down",
+    "value": {
+     "light": "#d23b35",
+     "dark": "#ff8f82"
+    },
+    "usage": "Gráficos: valor que baja (vela bajista, disminución en cascada, línea descendente)."
+   },
+   {
+    "name": "chart-total",
+    "value": {
+     "light": "#3e4656",
+     "dark": "#c3cad6"
+    },
+    "usage": "Gráficos: totales y subtotales de cascada, y valores sin cambio."
+   }
+  ]
+ },
+ "type": {
+  "fonts": [
+   {
+    "family": "Figtree",
+    "source": "google",
+    "spec": "Figtree:wght@300..900"
+   }
+  ],
+  "families": {
+   "sans": "\"Figtree\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif"
+  },
+  "groups": [
+   {
+    "name": "Títulos",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "kpi-number",
+      "fontSize": "30px",
+      "lineHeight": 1.15,
+      "fontWeight": 800,
+      "letterSpacing": "-0.03em",
+      "usage": "Cifra de un indicador: citas de hoy, en espera, ítems bajo mínimo.",
+      "sample": "18"
+     },
+     {
+      "name": "page-title",
+      "fontSize": "26px",
+      "lineHeight": 1.18,
+      "fontWeight": 800,
+      "letterSpacing": "-0.025em",
+      "usage": "Título de página del panel. Uno por vista; puede llevar una palabra en accent-word.",
+      "sample": "Agenda de hoy"
+     },
+     {
+      "name": "dialog-title",
+      "fontSize": "16px",
+      "lineHeight": 1.4,
+      "fontWeight": 750,
+      "usage": "Título de diálogo y de panel lateral.",
+      "sample": "Nueva cita"
+     },
+     {
+      "name": "card-title",
+      "fontSize": "14px",
+      "lineHeight": 1.5,
+      "fontWeight": 700,
+      "letterSpacing": "-0.01em",
+      "usage": "Título de tarjeta.",
+      "sample": "Cola sin cita"
+     }
+    ]
+   },
+   {
+    "name": "Texto",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "lede",
+      "fontSize": "14.5px",
+      "lineHeight": 1.5,
+      "fontWeight": 400,
+      "usage": "Frase bajo el título de página, en ink-2. Máximo 68 caracteres por línea.",
+      "sample": "12 citas, 3 personas en espera y 2 ítems bajo el mínimo."
+     },
+     {
+      "name": "body",
+      "fontSize": "14px",
+      "lineHeight": 1.5,
+      "fontWeight": 400,
+      "usage": "Texto base del panel.",
+      "sample": "Corte clásico con lavado, 45 min."
+     },
+     {
+      "name": "row-title",
+      "fontSize": "13.5px",
+      "lineHeight": 1.5,
+      "fontWeight": 650,
+      "usage": "Nombre del cliente, del servicio o del ítem en filas y tablas.",
+      "sample": "Renzo Quispe Mallma"
+     },
+     {
+      "name": "control",
+      "fontSize": "13px",
+      "lineHeight": 1.5,
+      "fontWeight": 650,
+      "usage": "Etiqueta de botones.",
+      "sample": "Nueva cita"
+     },
+     {
+      "name": "meta",
+      "fontSize": "12.5px",
+      "lineHeight": 1.5,
+      "fontWeight": 400,
+      "usage": "Metadatos bajo un título de fila, en ink-3.",
+      "sample": "Degradado · con Kevin · sede Real"
+     },
+     {
+      "name": "chip-text",
+      "fontSize": "12px",
+      "lineHeight": 1,
+      "fontWeight": 650,
+      "usage": "Texto de chips de estado.",
+      "sample": "En atención"
+     },
+     {
+      "name": "overline",
+      "fontSize": "11px",
+      "lineHeight": 1.5,
+      "fontWeight": 700,
+      "letterSpacing": "0.08em",
+      "usage": "Encabezado de tabla y rótulo de grupo en el panel. En mayúsculas y en ink-3. No se usa en la app móvil.",
+      "sample": "SERVICIO"
+     }
+    ]
+   },
+   {
+    "name": "Datos",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "clock",
+      "fontSize": "17px",
+      "lineHeight": 1,
+      "fontWeight": 700,
+      "usage": "Número del día en la tira de la semana. Cifras tabulares.",
+      "sample": "06"
+     },
+     {
+      "name": "data",
+      "fontSize": "12.5px",
+      "lineHeight": 1.6,
+      "fontWeight": 600,
+      "usage": "Horas, duraciones, cantidades, precios y códigos. Misma familia, con cifras tabulares (clase mono).",
+      "sample": "15:30 · 45 min · S/ 35.00"
+     },
+     {
+      "name": "count",
+      "fontSize": "11px",
+      "lineHeight": 1,
+      "fontWeight": 700,
+      "usage": "Contador en navegación y pestañas.",
+      "sample": "12"
+     }
+    ]
+   },
+   {
+    "name": "App móvil",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "m-title",
+      "fontSize": "34px",
+      "lineHeight": "41px",
+      "fontWeight": 800,
+      "letterSpacing": "-0.025em",
+      "usage": "Título de pantalla en la app, con una palabra en accent-word.",
+      "sample": "Hoy tienes 6 citas"
+     },
+     {
+      "name": "m-card-title",
+      "fontSize": "26px",
+      "lineHeight": 1.1,
+      "fontWeight": 800,
+      "letterSpacing": "-0.02em",
+      "usage": "Nombre del cliente en la tarjeta principal.",
+      "sample": "Renzo Quispe"
+     },
+     {
+      "name": "m-row-title",
+      "fontSize": "15.5px",
+      "lineHeight": 1.3,
+      "fontWeight": 700,
+      "usage": "Nombre en un bloque de la línea de tiempo y en filas.",
+      "sample": "Abel Soto"
+     },
+     {
+      "name": "m-body",
+      "fontSize": "15px",
+      "lineHeight": 1.45,
+      "fontWeight": 400,
+      "usage": "Texto bajo el título de pantalla.",
+      "sample": "Martes 6 de octubre · sede Centro"
+     },
+     {
+      "name": "m-button",
+      "fontSize": "15.5px",
+      "lineHeight": 1,
+      "fontWeight": 700,
+      "usage": "Etiqueta del botón principal de 54 px.",
+      "sample": "Terminar atención"
+     },
+     {
+      "name": "m-meta",
+      "fontSize": "13px",
+      "lineHeight": 1.4,
+      "fontWeight": 400,
+      "usage": "Segunda línea de un bloque o fila.",
+      "sample": "11:45–12:30 · Corte clásico"
+     }
+    ]
+   }
+  ]
+ },
+ "spacing": {
+  "tokens": [
+   {
+    "name": "space-2",
+    "value": "2px",
+    "usage": "Separación dentro de un control segmentado."
+   },
+   {
+    "name": "space-4",
+    "value": "4px",
+    "usage": "Margen interior de un bloque de cita."
+   },
+   {
+    "name": "space-6",
+    "value": "6px",
+    "usage": "Entre icono y texto en un botón o chip."
+   },
+   {
+    "name": "space-8",
+    "value": "8px",
+    "usage": "Entre botones de una barra de acciones."
+   },
+   {
+    "name": "space-10",
+    "value": "10px",
+    "usage": "Entre icono y texto en la navegación."
+   },
+   {
+    "name": "space-12",
+    "value": "12px",
+    "usage": "Relleno vertical de filas y cabeceras de tarjeta."
+   },
+   {
+    "name": "space-14",
+    "value": "14px",
+    "usage": "Relleno del cuerpo de tarjeta y separación de campos en un formulario."
+   },
+   {
+    "name": "space-16",
+    "value": "16px",
+    "usage": "Relleno horizontal de tarjetas, filas y celdas; separación entre tarjetas."
+   },
+   {
+    "name": "space-18",
+    "value": "18px",
+    "usage": "Separación entre bloques de una vista."
+   },
+   {
+    "name": "space-28",
+    "value": "28px",
+    "usage": "Margen lateral del contenido en escritorio. En móvil baja a space-16."
+   }
+  ]
+ },
+ "radius": {
+  "tokens": [
+   {
+    "name": "radius-xs",
+    "value": "4px",
+    "usage": "Rótulo sobre una trama y tecla."
+   },
+   {
+    "name": "radius-chip",
+    "value": "6px",
+    "usage": "Chip cuadrado de tipo."
+   },
+   {
+    "name": "radius-event",
+    "value": "10px",
+    "usage": "Bloque de cita y botón de hora en el panel."
+   },
+   {
+    "name": "radius-control",
+    "value": "12px",
+    "usage": "Campos de texto, ítems de navegación y días de la semana."
+   },
+   {
+    "name": "radius-tile",
+    "value": "12px",
+    "usage": "Marca del negocio y botón de usuario."
+   },
+   {
+    "name": "radius-banner",
+    "value": "14px",
+    "usage": "Avisos dentro de la página."
+   },
+   {
+    "name": "radius-card",
+    "value": "16px",
+    "usage": "Tarjetas, chips altos de la app y bloques de la línea de tiempo."
+   },
+   {
+    "name": "radius-dialog",
+    "value": "20px",
+    "usage": "Diálogos del panel."
+   },
+   {
+    "name": "radius-sheet",
+    "value": "36px",
+    "usage": "Hoja inferior flotante de la app, a 8 px de los bordes."
+   },
+   {
+    "name": "radius-pill",
+    "value": "999px",
+    "usage": "Botones, chips, bandejas y avatares."
+   }
+  ]
+ },
+ "shadow": {
+  "tokens": [
+   {
+    "name": "shadow-flat",
+    "value": {
+     "light": "0 0 0 .67px rgba(0,0,0,.11),0 1px 2px rgba(0,0,0,.04)",
+     "dark": "0 0 0 1px rgba(255,255,255,.09)"
+    },
+    "usage": "Tarjetas y botones secundarios: un filete y casi nada de sombra."
+   },
+   {
+    "name": "shadow-hero",
+    "value": {
+     "light": "0 0 0 .67px rgba(0,0,0,.11),0 4px 18px rgba(0,0,0,.10)",
+     "dark": "0 0 0 1px rgba(255,255,255,.10)"
+    },
+    "usage": "La única tarjeta elevada de una vista: el cliente actual, o quien sigue en la cola."
+   },
+   {
+    "name": "shadow-cta",
+    "value": {
+     "light": "0 8px 36px rgba(0,0,0,.065)",
+     "dark": "0 0 0 0 rgba(0,0,0,0)"
+    },
+    "usage": "Botón principal de 54 px en la app. Gris neutra, nunca teñida del color de marca."
+   },
+   {
+    "name": "shadow-sel",
+    "value": {
+     "light": "0 2px 8px rgba(0,0,0,.10)",
+     "dark": "0 0 0 0 rgba(0,0,0,0)"
+    },
+    "usage": "Píldora elegida: día, hora, opción de un control segmentado."
+   },
+   {
+    "name": "shadow-pop",
+    "value": {
+     "light": "0 0 0 .67px rgba(0,0,0,.11),0 18px 48px -12px rgba(0,0,0,.22)",
+     "dark": "0 0 0 1px rgba(255,255,255,.12)"
+    },
+    "usage": "Diálogos, hojas, menús y avisos. En oscuro no hay sombras: sobre negro no se ven, y la profundidad va en filetes."
+   }
+  ]
+ },
+ "size": {
+  "tokens": [
+   {
+    "name": "side-width",
+    "value": "244px",
+    "usage": "Ancho de la barra lateral."
+   },
+   {
+    "name": "top-height",
+    "value": "58px",
+    "usage": "Alto de la barra superior."
+   },
+   {
+    "name": "control-height",
+    "value": "36px",
+    "usage": "Alto de botones del panel."
+   },
+   {
+    "name": "control-height-sm",
+    "value": "30px",
+    "usage": "Alto de botones dentro de filas."
+   },
+   {
+    "name": "input-height",
+    "value": "38px",
+    "usage": "Alto de campos de texto y de botones de hora."
+   },
+   {
+    "name": "agenda-hour",
+    "value": "48px",
+    "usage": "Alto de una hora en la agenda del panel."
+   },
+   {
+    "name": "agenda-col",
+    "value": "148px",
+    "usage": "Ancho mínimo de la columna de un profesional."
+   },
+   {
+    "name": "m-button",
+    "value": "54px",
+    "usage": "Alto del botón principal en la app."
+   },
+   {
+    "name": "m-tray",
+    "value": "52px",
+    "usage": "Alto de una bandeja en la app: control segmentado y muestras de color, con relleno interior de 4 px."
+   },
+   {
+    "name": "m-chip",
+    "value": "60px",
+    "usage": "Alto de un chip de sugerencia en la app."
+   },
+   {
+    "name": "m-hour",
+    "value": "78px",
+    "usage": "Alto de una hora en la línea de tiempo de la app."
+   }
+  ]
+ },
+ "chartSwaps": {
+  "reserve": "chart-cat-reserve",
+  "palettes": {
+   "durazno": "chart-cat-3",
+   "menta": "chart-cat-2",
+   "cielo": "chart-cat-1",
+   "lavanda": "chart-cat-4",
+   "orquidea": "chart-cat-5",
+   "grafito": "chart-cat-6"
+  }
+ },
+ "styles": {
+  "default": "soft",
+  "tokens": [
+   {
+    "name": "radius-button",
+    "value": "999px",
+    "usage": "Botones. Píldora en el estilo suave."
+   },
+   {
+    "name": "radius-input",
+    "value": "12px",
+    "usage": "Campos de texto, selects y casillas de hora."
+   },
+   {
+    "name": "radius-badge",
+    "value": "999px",
+    "usage": "Chips y pastillas de estado."
+   },
+   {
+    "name": "radius-avatar",
+    "value": "999px",
+    "usage": "Avatares. data-radius no lo cambia: un avatar sigue siendo redondo salvo que el estilo diga otra cosa."
+   },
+   {
+    "name": "radius-popover",
+    "value": "14px",
+    "usage": "Menús, popovers y tooltips."
+   },
+   {
+    "name": "border-width-card",
+    "value": "0px",
+    "usage": "Grosor del borde de tarjetas. En suave es 0: el filete va en shadow-card."
+   },
+   {
+    "name": "border-color-card",
+    "value": "var(--hair)",
+    "usage": "Color del borde de tarjetas."
+   },
+   {
+    "name": "border-width-control",
+    "value": "1px",
+    "usage": "Grosor del borde de campos y controles."
+   },
+   {
+    "name": "border-color-control",
+    "value": "var(--line-control)",
+    "usage": "Color del borde de campos y controles."
+   },
+   {
+    "name": "border-width-divider",
+    "value": "1px",
+    "usage": "Grosor de las líneas divisorias."
+   },
+   {
+    "name": "border-color-divider",
+    "value": "var(--line)",
+    "usage": "Color de las líneas divisorias."
+   },
+   {
+    "name": "shadow-card",
+    "value": "var(--shadow-flat)",
+    "usage": "Sombra de tarjeta. Va junto a border-card: en suave es el filete de shadow-flat."
+   },
+   {
+    "name": "shadow-raised",
+    "value": "var(--shadow-hero)",
+    "usage": "Tarjeta elevada. Incluye su propio filete."
+   },
+   {
+    "name": "shadow-overlay",
+    "value": "var(--shadow-pop)",
+    "usage": "Diálogos, hojas, menús y popovers. Incluye su propio filete."
+   },
+   {
+    "name": "shadow-control",
+    "value": "var(--shadow-flat)",
+    "usage": "Botón secundario y controles sin borde."
+   },
+   {
+    "name": "shadow-selected",
+    "value": "var(--shadow-sel)",
+    "usage": "Opción elegida de un control segmentado, día u hora."
+   },
+   {
+    "name": "shadow-inset",
+    "value": {
+     "light": "inset 0 1px 2px rgba(0,0,0,.06)",
+     "dark": "inset 0 0 0 1px rgba(255,255,255,.05)"
+    },
+    "usage": "Zona hundida: pista, bandeja."
+   },
+   {
+    "name": "shadow-inset-accent",
+    "value": "inset 0 0 0 1px var(--accent-line)",
+    "usage": "Filete interior de marca: chip o día destacado."
+   },
+   {
+    "name": "shadow-pinned-start",
+    "value": {
+     "light": "6px 0 8px -6px rgba(0,0,0,.28)",
+     "dark": "1px 0 0 rgba(255,255,255,.10),6px 0 10px -6px rgba(0,0,0,.9)"
+    },
+    "usage": "Borde de una columna fijada al inicio de una tabla cuando hay desplazamiento."
+   },
+   {
+    "name": "shadow-pinned-end",
+    "value": {
+     "light": "-6px 0 8px -6px rgba(0,0,0,.28)",
+     "dark": "-1px 0 0 rgba(255,255,255,.10),-6px 0 10px -6px rgba(0,0,0,.9)"
+    },
+    "usage": "Borde de una columna fijada al final de una tabla cuando hay desplazamiento."
+   },
+   {
+    "name": "surface-alpha",
+    "value": "1",
+    "usage": "Opacidad de las superficies (0 a 1). Solo baja en el estilo vidrio."
+   },
+   {
+    "name": "surface-blur",
+    "value": "0px",
+    "usage": "Desenfoque detrás de superficies translúcidas."
+   },
+   {
+    "name": "surface-filter",
+    "value": "none",
+    "usage": "backdrop-filter de tarjetas y overlays. none salvo en vidrio: un filtro activo crea un bloque contenedor."
+   },
+   {
+    "name": "surface-card",
+    "value": "var(--surface)",
+    "usage": "Fondo de tarjetas."
+   },
+   {
+    "name": "surface-control",
+    "value": "var(--surface)",
+    "usage": "Fondo de campos y botones secundarios."
+   },
+   {
+    "name": "surface-overlay",
+    "value": "var(--float)",
+    "usage": "Fondo de diálogos, hojas, menús y popovers."
+   },
+   {
+    "name": "surface-sunken",
+    "value": "var(--sunken)",
+    "usage": "Fondo hundido: pistas, zonas de arrastre."
+   },
+   {
+    "name": "surface-backdrop",
+    "value": "var(--scrim)",
+    "usage": "Velo detrás de diálogos y hojas."
+   },
+   {
+    "name": "page-backdrop",
+    "value": "none",
+    "usage": "Imagen de fondo de la página. Solo el estilo vidrio la usa, para que la translucidez se note."
+   },
+   {
+    "name": "focus-ring-width",
+    "value": "2px",
+    "usage": "Grosor del anillo de foco."
+   },
+   {
+    "name": "focus-ring-offset",
+    "value": "2px",
+    "usage": "Separación del anillo de foco."
+   },
+   {
+    "name": "focus-ring-color",
+    "value": "var(--accent-ink)",
+    "usage": "Color del anillo de foco."
+   },
+   {
+    "name": "motion-duration",
+    "value": "180ms",
+    "usage": "Duración de transiciones de estado."
+   },
+   {
+    "name": "motion-ease",
+    "value": "cubic-bezier(.2,.8,.2,1)",
+    "usage": "Curva de las transiciones."
+   },
+   {
+    "name": "press-scale",
+    "value": ".97",
+    "usage": "Escala de un control al presionarlo."
+   },
+   {
+    "name": "font-scale",
+    "value": "1",
+    "usage": "Factor opcional para escalar texto. Ningún token de texto lo usa todavía."
+   }
+  ],
+  "presets": [
+   {
+    "id": "soft",
+    "name": "Suave",
+    "usage": "El estilo por defecto: filetes finos en vez de bordes, sombras mínimas, botones píldora.",
+    "values": {}
+   },
+   {
+    "id": "bordered",
+    "name": "Con bordes",
+    "usage": "Bordes nítidos de 1 px y ninguna sombra. Radios más cerrados.",
+    "values": {
+     "radius-xs": "3px",
+     "radius-chip": "4px",
+     "radius-event": "6px",
+     "radius-control": "8px",
+     "radius-tile": "8px",
+     "radius-banner": "10px",
+     "radius-card": "10px",
+     "radius-dialog": "14px",
+     "radius-sheet": "24px",
+     "radius-pill": "999px",
+     "radius-button": "8px",
+     "radius-input": "8px",
+     "radius-badge": "6px",
+     "radius-popover": "10px",
+     "border-width-card": "1px",
+     "border-color-card": "var(--line-strong)",
+     "shadow-flat": "0 0 0 1px var(--line-strong)",
+     "shadow-hero": "0 0 0 1px var(--line-strong)",
+     "shadow-cta": "0 0 #0000",
+     "shadow-sel": "0 0 0 1px var(--line-control)",
+     "shadow-pop": "0 0 0 1px var(--line-strong)",
+     "shadow-card": "0 0 #0000",
+     "shadow-raised": "0 0 0 1px var(--line-strong)",
+     "shadow-overlay": "0 0 0 1px var(--line-strong)",
+     "shadow-control": "0 0 0 1px var(--line-strong)",
+     "shadow-selected": "0 0 0 1px var(--line-control)",
+     "shadow-inset": "0 0 #0000"
+    }
+   },
+   {
+    "id": "elevated",
+    "name": "Elevado",
+    "usage": "Sombras en capas y ningún borde. En oscuro las superficies se aclaran por nivel.",
+    "values": {
+     "shadow-flat": {
+      "light": "0 1px 2px rgba(17,17,26,.06),0 2px 6px rgba(17,17,26,.06)",
+      "dark": "0 0 0 1px rgba(255,255,255,.06),0 2px 8px rgba(0,0,0,.7)"
+     },
+     "shadow-hero": {
+      "light": "0 2px 4px rgba(17,17,26,.06),0 12px 24px -4px rgba(17,17,26,.10),0 32px 64px -24px rgba(17,17,26,.22)",
+      "dark": "0 0 0 1px rgba(255,255,255,.09),0 16px 40px rgba(0,0,0,.8)"
+     },
+     "shadow-cta": {
+      "light": "0 10px 30px -8px rgba(17,17,26,.25)",
+      "dark": "0 0 #0000"
+     },
+     "shadow-sel": {
+      "light": "0 2px 8px rgba(17,17,26,.14)",
+      "dark": "0 0 0 1px rgba(255,255,255,.14)"
+     },
+     "shadow-pop": {
+      "light": "0 4px 8px rgba(17,17,26,.06),0 24px 56px -12px rgba(17,17,26,.30)",
+      "dark": "0 0 0 1px rgba(255,255,255,.11),0 24px 56px rgba(0,0,0,.85)"
+     },
+     "shadow-card": {
+      "light": "0 1px 2px rgba(17,17,26,.05),0 4px 12px rgba(17,17,26,.06),0 16px 32px -12px rgba(17,17,26,.12)",
+      "dark": "0 0 0 1px rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.75)"
+     },
+     "shadow-control": {
+      "light": "0 1px 2px rgba(17,17,26,.08),0 2px 4px rgba(17,17,26,.04)",
+      "dark": "0 0 0 1px rgba(255,255,255,.08)"
+     },
+     "surface-card": {
+      "light": "var(--surface)",
+      "dark": "#141417"
+     },
+     "surface-overlay": {
+      "light": "var(--float)",
+      "dark": "#1c1c20"
+     }
+    }
+   },
+   {
+    "id": "flat",
+    "name": "Plano",
+    "usage": "Sin bordes ni sombras: las tarjetas se separan por un relleno teñido. Los overlays conservan un filete para despegarse de la página.",
+    "values": {
+     "shadow-flat": "0 0 #0000",
+     "shadow-hero": "0 0 #0000",
+     "shadow-cta": "0 0 #0000",
+     "shadow-sel": "0 0 #0000",
+     "shadow-pop": "0 0 0 1px var(--line)",
+     "shadow-card": "0 0 #0000",
+     "shadow-raised": "0 0 #0000",
+     "shadow-overlay": "0 0 0 1px var(--line)",
+     "shadow-control": "0 0 #0000",
+     "shadow-selected": "0 0 #0000",
+     "shadow-inset": "0 0 #0000",
+     "surface-card": {
+      "light": "#ebebf0",
+      "dark": "#141417"
+     },
+     "surface-control": {
+      "light": "#ffffff",
+      "dark": "#1a1a1d"
+     },
+     "surface-overlay": {
+      "light": "#ffffff",
+      "dark": "#1f1f23"
+     },
+     "press-scale": ".98"
+    }
+   },
+   {
+    "id": "glass",
+    "name": "Vidrio",
+    "usage": "Superficies translúcidas con desenfoque y filetes claros, sobre un fondo de página degradado.",
+    "values": {
+     "radius-xs": "6px",
+     "radius-chip": "8px",
+     "radius-event": "12px",
+     "radius-control": "12px",
+     "radius-tile": "14px",
+     "radius-banner": "16px",
+     "radius-card": "20px",
+     "radius-dialog": "24px",
+     "radius-sheet": "36px",
+     "radius-pill": "999px",
+     "radius-button": "999px",
+     "radius-input": "12px",
+     "radius-badge": "999px",
+     "radius-popover": "18px",
+     "surface-alpha": {
+      "light": ".62",
+      "dark": ".5"
+     },
+     "surface-blur": "18px",
+     "surface-filter": "blur(var(--surface-blur)) saturate(1.6)",
+     "surface-card": "color-mix(in srgb, var(--surface) calc(var(--surface-alpha) * 100%), transparent)",
+     "surface-control": "color-mix(in srgb, var(--surface) calc(var(--surface-alpha) * 100% + 20%), transparent)",
+     "surface-overlay": "color-mix(in srgb, var(--float) calc(var(--surface-alpha) * 100% + 20%), transparent)",
+     "surface-backdrop": {
+      "light": "rgba(20,20,30,.16)",
+      "dark": "rgba(0,0,0,.5)"
+     },
+     "page-backdrop": {
+      "light": "radial-gradient(60% 55% at 12% 8%, var(--accent-soft), transparent),radial-gradient(55% 50% at 92% 88%, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent),radial-gradient(40% 40% at 70% 20%, color-mix(in srgb, var(--chart-cat-1) 18%, transparent), transparent)",
+      "dark": "radial-gradient(60% 55% at 12% 8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent),radial-gradient(55% 50% at 92% 88%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent),radial-gradient(40% 40% at 70% 20%, color-mix(in srgb, var(--chart-cat-1) 14%, transparent), transparent)"
+     },
+     "border-width-card": "1px",
+     "border-color-card": {
+      "light": "rgba(255,255,255,.75)",
+      "dark": "rgba(255,255,255,.12)"
+     },
+     "shadow-flat": {
+      "light": "0 0 0 1px rgba(255,255,255,.7),0 4px 16px -4px rgba(17,17,26,.10)",
+      "dark": "0 0 0 1px rgba(255,255,255,.10),0 4px 16px rgba(0,0,0,.5)"
+     },
+     "shadow-hero": {
+      "light": "0 0 0 1px rgba(255,255,255,.75),0 16px 40px -12px rgba(17,17,26,.22)",
+      "dark": "0 0 0 1px rgba(255,255,255,.12),0 16px 40px rgba(0,0,0,.6)"
+     },
+     "shadow-pop": {
+      "light": "0 0 0 1px rgba(255,255,255,.6),0 24px 48px -12px rgba(17,17,26,.28)",
+      "dark": "0 0 0 1px rgba(255,255,255,.14),0 24px 48px rgba(0,0,0,.7)"
+     },
+     "shadow-card": {
+      "light": "inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px -8px rgba(17,17,26,.16)",
+      "dark": "inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.6)"
+     },
+     "shadow-raised": "var(--shadow-hero)",
+     "shadow-overlay": "var(--shadow-pop)"
+    }
+   },
+   {
+    "id": "brutal",
+    "name": "Brutal",
+    "usage": "Bordes gruesos de tinta, sombras duras desplazadas y esquinas rectas.",
+    "values": {
+     "radius-xs": "0px",
+     "radius-chip": "0px",
+     "radius-event": "0px",
+     "radius-control": "0px",
+     "radius-tile": "0px",
+     "radius-banner": "0px",
+     "radius-card": "0px",
+     "radius-dialog": "0px",
+     "radius-sheet": "0px",
+     "radius-pill": "0px",
+     "radius-button": "0px",
+     "radius-input": "0px",
+     "radius-badge": "0px",
+     "radius-popover": "0px",
+     "radius-avatar": "0px",
+     "border-width-card": "2px",
+     "border-color-card": "var(--ink)",
+     "border-width-control": "2px",
+     "border-color-control": "var(--ink)",
+     "border-width-divider": "2px",
+     "border-color-divider": "var(--ink)",
+     "shadow-flat": "0 0 0 2px var(--ink),5px 5px 0 0 var(--ink)",
+     "shadow-hero": "0 0 0 2px var(--ink),8px 8px 0 0 var(--ink)",
+     "shadow-cta": "4px 4px 0 0 var(--ink)",
+     "shadow-sel": "0 0 0 2px var(--ink)",
+     "shadow-pop": "0 0 0 2px var(--ink),6px 6px 0 0 var(--ink)",
+     "shadow-card": "4px 4px 0 0 var(--ink)",
+     "shadow-raised": "0 0 0 2px var(--ink),8px 8px 0 0 var(--ink)",
+     "shadow-overlay": "0 0 0 2px var(--ink),6px 6px 0 0 var(--ink)",
+     "shadow-control": "0 0 0 2px var(--ink),3px 3px 0 0 var(--ink)",
+     "shadow-selected": "0 0 0 2px var(--ink)",
+     "shadow-inset": "0 0 #0000",
+     "shadow-inset-accent": "inset 0 0 0 2px var(--accent-ink)",
+     "focus-ring-width": "3px",
+     "focus-ring-color": "var(--ink)",
+     "motion-duration": "60ms",
+     "motion-ease": "linear"
+    }
+   }
+  ],
+  "density": {
+   "tokens": [
+    {
+     "name": "density",
+     "value": "1",
+     "usage": "Factor de densidad sin unidad. Lo fija data-density; los altos y rellenos de abajo se multiplican por él."
+    },
+    {
+     "name": "pad-control-x",
+     "value": "16px",
+     "usage": "Relleno horizontal de botones y campos."
+    },
+    {
+     "name": "pad-card",
+     "value": "16px",
+     "usage": "Relleno de tarjetas."
+    },
+    {
+     "name": "gap-density-sm",
+     "value": "8px",
+     "usage": "Separación corta entre elementos de un grupo."
+    },
+    {
+     "name": "gap-density",
+     "value": "12px",
+     "usage": "Separación entre elementos de una lista o formulario."
+    },
+    {
+     "name": "gap-density-lg",
+     "value": "18px",
+     "usage": "Separación entre bloques de una vista."
+    }
+   ],
+   "scaled": [
+    "control-height",
+    "control-height-sm",
+    "input-height",
+    "pad-control-x",
+    "pad-card",
+    "gap-density-sm",
+    "gap-density",
+    "gap-density-lg"
+   ],
+   "levels": [
+    {
+     "id": "compact",
+     "name": "Compacta",
+     "density": 0.875
+    },
+    {
+     "id": "normal",
+     "name": "Normal",
+     "density": 1
+    },
+    {
+     "id": "comfortable",
+     "name": "Cómoda",
+     "density": 1.125
+    }
+   ]
+  },
+  "radius": {
+   "levels": [
+    {
+     "id": "none",
+     "name": "Sin radio",
+     "values": {
+      "radius-xs": "0px",
+      "radius-chip": "0px",
+      "radius-event": "0px",
+      "radius-control": "0px",
+      "radius-tile": "0px",
+      "radius-banner": "0px",
+      "radius-card": "0px",
+      "radius-dialog": "0px",
+      "radius-sheet": "0px",
+      "radius-pill": "0px",
+      "radius-button": "0px",
+      "radius-input": "0px",
+      "radius-badge": "0px",
+      "radius-popover": "0px"
+     }
+    },
+    {
+     "id": "sm",
+     "name": "Pequeño",
+     "values": {
+      "radius-xs": "2px",
+      "radius-chip": "3px",
+      "radius-event": "4px",
+      "radius-control": "6px",
+      "radius-tile": "6px",
+      "radius-banner": "6px",
+      "radius-card": "8px",
+      "radius-dialog": "10px",
+      "radius-sheet": "16px",
+      "radius-pill": "999px",
+      "radius-button": "6px",
+      "radius-input": "6px",
+      "radius-badge": "4px",
+      "radius-popover": "8px"
+     }
+    },
+    {
+     "id": "md",
+     "name": "Medio",
+     "values": {
+      "radius-xs": "4px",
+      "radius-chip": "6px",
+      "radius-event": "8px",
+      "radius-control": "10px",
+      "radius-tile": "10px",
+      "radius-banner": "12px",
+      "radius-card": "12px",
+      "radius-dialog": "16px",
+      "radius-sheet": "24px",
+      "radius-pill": "999px",
+      "radius-button": "10px",
+      "radius-input": "10px",
+      "radius-badge": "6px",
+      "radius-popover": "12px"
+     }
+    },
+    {
+     "id": "lg",
+     "name": "Grande",
+     "values": {
+      "radius-xs": "6px",
+      "radius-chip": "8px",
+      "radius-event": "12px",
+      "radius-control": "14px",
+      "radius-tile": "14px",
+      "radius-banner": "18px",
+      "radius-card": "20px",
+      "radius-dialog": "24px",
+      "radius-sheet": "36px",
+      "radius-pill": "999px",
+      "radius-button": "999px",
+      "radius-input": "14px",
+      "radius-badge": "999px",
+      "radius-popover": "16px"
+     }
+    },
+    {
+     "id": "full",
+     "name": "Completo",
+     "values": {
+      "radius-xs": "8px",
+      "radius-chip": "999px",
+      "radius-event": "16px",
+      "radius-control": "999px",
+      "radius-tile": "20px",
+      "radius-banner": "24px",
+      "radius-card": "28px",
+      "radius-dialog": "32px",
+      "radius-sheet": "40px",
+      "radius-pill": "999px",
+      "radius-button": "999px",
+      "radius-input": "999px",
+      "radius-badge": "999px",
+      "radius-popover": "20px"
+     }
+    }
+   ]
+  },
+  "tailwind": {
+   "--radius-button": "radius-button",
+   "--radius-input": "radius-input",
+   "--radius-badge": "radius-badge",
+   "--radius-avatar": "radius-avatar",
+   "--radius-popover": "radius-popover",
+   "--shadow-card": "shadow-card",
+   "--shadow-raised": "shadow-raised",
+   "--shadow-overlay": "shadow-overlay",
+   "--shadow-control": "shadow-control",
+   "--shadow-selected": "shadow-selected",
+   "--shadow-inset": "shadow-inset",
+   "--shadow-inset-accent": "shadow-inset-accent",
+   "--shadow-pinned-start": "shadow-pinned-start",
+   "--shadow-pinned-end": "shadow-pinned-end",
+   "--color-surface-card": "surface-card",
+   "--color-surface-control": "surface-control",
+   "--color-surface-overlay": "surface-overlay",
+   "--color-surface-sunken": "surface-sunken",
+   "--color-surface-backdrop": "surface-backdrop",
+   "--color-divider": "border-color-divider",
+   "--color-focus-ring": "focus-ring-color",
+   "--blur-surface": "surface-blur",
+   "--ease-style": "motion-ease",
+   "--spacing-control": "control-height",
+   "--spacing-control-sm": "control-height-sm",
+   "--spacing-input": "input-height",
+   "--spacing-control-x": "pad-control-x",
+   "--spacing-card": "pad-card",
+   "--spacing-density-sm": "gap-density-sm",
+   "--spacing-density": "gap-density",
+   "--spacing-density-lg": "gap-density-lg"
+  },
+  "utilities": {
+   "border-card": {
+    "border-width": "var(--border-width-card)",
+    "border-style": "solid",
+    "border-color": "var(--border-color-card)"
+   },
+   "border-control": {
+    "border-width": "var(--border-width-control)",
+    "border-style": "solid",
+    "border-color": "var(--border-color-control)"
+   },
+   "border-divider": {
+    "border-width": "var(--border-width-divider)",
+    "border-style": "solid",
+    "border-color": "var(--border-color-divider)"
+   },
+   "border-l-divider": {
+    "border-left": "var(--border-width-divider) solid var(--border-color-divider)"
+   },
+   "border-r-divider": {
+    "border-right": "var(--border-width-divider) solid var(--border-color-divider)"
+   },
+   "border-t-divider": {
+    "border-top": "var(--border-width-divider) solid var(--border-color-divider)"
+   },
+   "border-b-divider": {
+    "border-bottom": "var(--border-width-divider) solid var(--border-color-divider)"
+   },
+   "surface-card": {
+    "background-color": "var(--surface-card)",
+    "-webkit-backdrop-filter": "var(--surface-filter)",
+    "backdrop-filter": "var(--surface-filter)"
+   },
+   "surface-overlay": {
+    "background-color": "var(--surface-overlay)",
+    "-webkit-backdrop-filter": "var(--surface-filter)",
+    "backdrop-filter": "var(--surface-filter)"
+   },
+   "focus-ring": {
+    "outline": "var(--focus-ring-width) solid var(--focus-ring-color)",
+    "outline-offset": "var(--focus-ring-offset)"
+   },
+   "pressable": {
+    "transition": "scale var(--motion-duration) var(--motion-ease)",
+    "&:active:not(:disabled)": {
+     "scale": "var(--press-scale)"
+    }
+   }
+  }
+ }
+}