# Design tokens

> Every design token of the default theme, generated from tokens/default.json.

Source: https://ui.jcsoftdev.com/docs/theming/tokens

Generated from `tokens/default.json` ("Barbershop default", schema v2). Usage notes are kept in the language of the token file (Spanish).

## Color

| Token | CSS variable | Light / dark | Usage |
| --- | --- | --- | --- |
| `bg` | `--bg` | `#f4f4f8` / `#000000` | Fondo de la página. En oscuro es negro puro: en pantallas AMOLED esos píxeles quedan apagados. |
| `surface` | `--surface` | `#ffffff` / `#0e0e10` | Tarjetas, barra lateral, campos y filas. En oscuro va apenas encendida sobre el negro. |
| `surface-2` | `--surface-2` | `#eeeef1` / `#1a1a1d` | Fila en hover, chip neutro y relleno de controles dentro de una tarjeta. |
| `sunken` | `--sunken` | `#e7e7ed` / `#232327` | Fondo hundido: avatar neutro y zonas de arrastre. |
| `float` | `--float` | `#ffffff` / `#141417` | 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. |
| `line` | `--line` | `#e3e3e6` / `#1f1f23` | Líneas divisorias, borde de chips sin relleno y de bloques apagados. Decorativa: no delimita controles. |
| `line-strong` | `--line-strong` | `#d2d2dc` / `#303036` | 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. |
| `line-control` | `--line-control` | `#85858f` / `#6e6e7a` | Borde de campos de texto, selects y casillas. Da 3.7:1 sobre surface en claro y 3.8:1 en oscuro. |
| `hair` | `--hair` | `rgba(0,0,0,.11)` / `rgba(255,255,255,.10)` | Filete de 0.67 px que rodea tarjetas y botones secundarios. Va dentro de shadow-flat y shadow-hero. |
| `track` | `--track` | `#dedee2` / `#232327` | Pista de barras de avance y de nivel de stock. |
| `seg-track` | `--seg-track` | `#e7e7ed` / `#151518` | Bandeja del control segmentado. |
| `seg-on` | `--seg-on` | `#ffffff` / `#2b2b30` | Opción elegida del control segmentado. Es neutra: el color de marca no se usa para selectores. |
| `ink` | `--ink` | `#000000` / `#f2f2f5` | Texto principal. En oscuro es un blanco roto para que no deslumbre sobre negro. |
| `ink-2` | `--ink-2` | `#4b4b57` / `#b6b6c1` | Texto secundario y etiquetas, sobre cualquier superficie. |
| `ink-3` | `--ink-3` | `#6d6d7a` / `#8c8c98` | Metadatos y encabezados de tabla, sobre bg y surface (4.6:1 sobre bg en claro). Sobre surface-2 usa ink-2. |
| `accent` | `--accent` | `#faa2a2` / `#faa2a2` | 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. |
| `on-accent` | `--on-accent` | `#3f191a` / `#3f191a` | Texto e iconos sobre un relleno accent: el tono profundo del mismo matiz (7.9:1). Igual en claro y en oscuro. |
| `accent-ink` | `--accent-ink` | `#a43a41` / `#ffb4b3` | 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. |
| `accent-word` | `--accent-word` | `#dc5d63` / `#faa2a2` | 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. |
| `accent-soft` | `--accent-soft` | `#ffebea` / `#261112` | Fondo suave de marca: cita en atención, ítem activo de navegación, aviso informativo. |
| `accent-line` | `--accent-line` | `#f6c2c1` / `#5b2e2f` | Filete de marca: borde de la cita en atención y de la tarjeta que resume lo que se está reservando. |
| `accent-2` | `--accent-2` | `#fec79e` / `#fec79e` | Tono vecino, 38° más allá en el círculo de color. Solo para el degradado detrás de la rueda de hora. |
| `pal-durazno-fill` | `--pal-durazno-fill` | `#efae75` / `#efae75` | Paleta Durazno: relleno. Reemplaza a accent con data-accent="durazno". |
| `pal-durazno-deep` | `--pal-durazno-deep` | `#3b1f02` / `#3b1f02` | Paleta Durazno: texto sobre el relleno. Reemplaza a on-accent con data-accent="durazno". |
| `pal-durazno-ink` | `--pal-durazno-ink` | `#905203` / `#f6be8e` | Paleta Durazno: texto en color. Reemplaza a accent-ink con data-accent="durazno". |
| `pal-durazno-word` | `--pal-durazno-word` | `#c97405` / `#efae75` | Paleta Durazno: palabra de título. Reemplaza a accent-word con data-accent="durazno". |
| `pal-durazno-soft` | `--pal-durazno-soft` | `#ffecde` / `#241406` | Paleta Durazno: fondo suave. Reemplaza a accent-soft con data-accent="durazno". |
| `pal-durazno-line` | `--pal-durazno-line` | `#eec9a9` / `#553515` | Paleta Durazno: filete. Reemplaza a accent-line con data-accent="durazno". |
| `pal-durazno-2` | `--pal-durazno-2` | `#e1d695` / `#e1d695` | Paleta Durazno: tono vecino. Reemplaza a accent-2 con data-accent="durazno". |
| `pal-menta-fill` | `--pal-menta-fill` | `#77d3ad` / `#77d3ad` | Paleta Menta: relleno. Reemplaza a accent con data-accent="menta". |
| `pal-menta-deep` | `--pal-menta-deep` | `#002f1f` / `#002f1f` | Paleta Menta: texto sobre el relleno. Reemplaza a on-accent con data-accent="menta". |
| `pal-menta-ink` | `--pal-menta-ink` | `#047554` / `#91debc` | Paleta Menta: texto en color. Reemplaza a accent-ink con data-accent="menta". |
| `pal-menta-word` | `--pal-menta-word` | `#03a578` / `#77d3ad` | Paleta Menta: palabra de título. Reemplaza a accent-word con data-accent="menta". |
| `pal-menta-soft` | `--pal-menta-soft` | `#e0f7eb` / `#061d14` | Paleta Menta: fondo suave. Reemplaza a accent-soft con data-accent="menta". |
| `pal-menta-line` | `--pal-menta-line` | `#addec7` / `#134834` | Paleta Menta: filete. Reemplaza a accent-line con data-accent="menta". |
| `pal-menta-2` | `--pal-menta-2` | `#8ee5ed` / `#8ee5ed` | Paleta Menta: tono vecino. Reemplaza a accent-2 con data-accent="menta". |
| `pal-cielo-fill` | `--pal-cielo-fill` | `#76c9f8` / `#76c9f8` | Paleta Cielo: relleno. Reemplaza a accent con data-accent="cielo". |
| `pal-cielo-deep` | `--pal-cielo-deep` | `#002a3e` / `#002a3e` | Paleta Cielo: texto sobre el relleno. Reemplaza a on-accent con data-accent="cielo". |
| `pal-cielo-ink` | `--pal-cielo-ink` | `#006c97` / `#8fd5fd` | Paleta Cielo: texto en color. Reemplaza a accent-ink con data-accent="cielo". |
| `pal-cielo-word` | `--pal-cielo-word` | `#0097d2` / `#76c9f8` | Paleta Cielo: palabra de título. Reemplaza a accent-word con data-accent="cielo". |
| `pal-cielo-soft` | `--pal-cielo-soft` | `#e1f3fe` / `#061b26` | Paleta Cielo: fondo suave. Reemplaza a accent-soft con data-accent="cielo". |
| `pal-cielo-line` | `--pal-cielo-line` | `#abd8f3` / `#12425a` | Paleta Cielo: filete. Reemplaza a accent-line con data-accent="cielo". |
| `pal-cielo-2` | `--pal-cielo-2` | `#c6d2ff` / `#c6d2ff` | Paleta Cielo: tono vecino. Reemplaza a accent-2 con data-accent="cielo". |
| `pal-lavanda-fill` | `--pal-lavanda-fill` | `#bab3fe` / `#bab3fe` | Paleta Lavanda: relleno. Reemplaza a accent con data-accent="lavanda". |
| `pal-lavanda-deep` | `--pal-lavanda-deep` | `#252142` / `#252142` | Paleta Lavanda: texto sobre el relleno. Reemplaza a on-accent con data-accent="lavanda". |
| `pal-lavanda-ink` | `--pal-lavanda-ink` | `#6152ad` / `#c7c2ff` | Paleta Lavanda: texto en color. Reemplaza a accent-ink con data-accent="lavanda". |
| `pal-lavanda-word` | `--pal-lavanda-word` | `#8979e6` / `#bab3fe` | Paleta Lavanda: palabra de título. Reemplaza a accent-word con data-accent="lavanda". |
| `pal-lavanda-soft` | `--pal-lavanda-soft` | `#efeeff` / `#171627` | Paleta Lavanda: fondo suave. Reemplaza a accent-soft con data-accent="lavanda". |
| `pal-lavanda-line` | `--pal-lavanda-line` | `#cecbf7` / `#3c375d` | Paleta Lavanda: filete. Reemplaza a accent-line con data-accent="lavanda". |
| `pal-lavanda-2` | `--pal-lavanda-2` | `#f2c1f3` / `#f2c1f3` | Paleta Lavanda: tono vecino. Reemplaza a accent-2 con data-accent="lavanda". |
| `pal-orquidea-fill` | `--pal-orquidea-fill` | `#eaa3d5` / `#eaa3d5` | Paleta Orquídea: relleno. Reemplaza a accent con data-accent="orquidea". |
| `pal-orquidea-deep` | `--pal-orquidea-deep` | `#391a31` / `#391a31` | Paleta Orquídea: texto sobre el relleno. Reemplaza a on-accent con data-accent="orquidea". |
| `pal-orquidea-ink` | `--pal-orquidea-ink` | `#933e7f` / `#f2b4df` | Paleta Orquídea: texto en color. Reemplaza a accent-ink con data-accent="orquidea". |
| `pal-orquidea-word` | `--pal-orquidea-word` | `#c861ad` / `#eaa3d5` | Paleta Orquídea: palabra de título. Reemplaza a accent-word con data-accent="orquidea". |
| `pal-orquidea-soft` | `--pal-orquidea-soft` | `#fee9f7` / `#23121e` | Paleta Orquídea: fondo suave. Reemplaza a accent-soft con data-accent="orquidea". |
| `pal-orquidea-line` | `--pal-orquidea-line` | `#ecc2df` / `#532f49` | Paleta Orquídea: filete. Reemplaza a accent-line con data-accent="orquidea". |
| `pal-orquidea-2` | `--pal-orquidea-2` | `#fec2c5` / `#fec2c5` | Paleta Orquídea: tono vecino. Reemplaza a accent-2 con data-accent="orquidea". |
| `pal-grafito-fill` | `--pal-grafito-fill` | `#26262b` / `#ececf0` | Paleta Grafito: relleno. Reemplaza a accent con data-accent="grafito". |
| `pal-grafito-deep` | `--pal-grafito-deep` | `#ffffff` / `#1a1a1e` | Paleta Grafito: texto sobre el relleno. Reemplaza a on-accent con data-accent="grafito". |
| `pal-grafito-ink` | `--pal-grafito-ink` | `#26262b` / `#ececf0` | Paleta Grafito: texto en color. Reemplaza a accent-ink con data-accent="grafito". |
| `pal-grafito-word` | `--pal-grafito-word` | `#8a8a94` / `#a3a3ad` | Paleta Grafito: palabra de título. Reemplaza a accent-word con data-accent="grafito". |
| `pal-grafito-soft` | `--pal-grafito-soft` | `#ececf0` / `#1d1d21` | Paleta Grafito: fondo suave. Reemplaza a accent-soft con data-accent="grafito". |
| `pal-grafito-line` | `--pal-grafito-line` | `#c6c6cf` / `#3a3a42` | Paleta Grafito: filete. Reemplaza a accent-line con data-accent="grafito". |
| `pal-grafito-2` | `--pal-grafito-2` | `#b9b9c6` / `#5a5a66` | Paleta Grafito: tono vecino. Reemplaza a accent-2 con data-accent="grafito". |
| `danger` | `--danger` | `#c51f1c` / `#ff9689` | 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. |
| `danger-soft` | `--danger-soft` | `#ffebe8` / `#300f0b` | Fondo de la cita con ausencia y del chip de error. |
| `warning` | `--warning` | `#865900` / `#ebc166` | Algo que pide atención hoy: cliente que llegó y espera, stock cerca del mínimo. |
| `warning-soft` | `--warning-soft` | `#feefcf` / `#241900` | Fondo de la cita cuyo cliente ya llegó y del chip de aviso. |
| `success` | `--success` | `#0b7643` / `#80dba2` | Terminado y en nivel. Solo comunica estado. |
| `success-soft` | `--success-soft` | `#dff8e6` / `#062111` | Fondo del chip de éxito y del aviso de proceso cerrado. |
| `hatch` | `--hatch` | `#e6e6ec` / `#1b1b1f` | Trama diagonal: tiempo que no se puede reservar (fuera de horario, descanso, hora ocupada, reposo de un servicio). |
| `scrim` | `--scrim` | `rgba(0,0,0,.2)` / `rgba(0,0,0,.72)` | Velo detrás de diálogos y hojas. |
| `toast-bg` | `--toast-bg` | `#000000` / `#222226` | Fondo del aviso breve. En oscuro es un gris, no blanco: sería lo más brillante de la pantalla. |
| `toast-ink` | `--toast-ink` | `#ffffff` / `#f2f2f5` | Texto y botón del aviso breve. |
| `chart-cat-1` | `--chart-cat-1` | `#2f7fc1` / `#6db8f2` | Gráficos: color de la serie 2 (Azul cielo). La serie 1 siempre usa accent-word; las demás siguen este orden. |
| `chart-cat-2` | `--chart-cat-2` | `#12936f` / `#5fd0a6` | Gráficos: color de la serie 3 (Verde menta). La serie 1 siempre usa accent-word; las demás siguen este orden. |
| `chart-cat-3` | `--chart-cat-3` | `#c7820f` / `#f0b85a` | Gráficos: color de la serie 4 (Ámbar). La serie 1 siempre usa accent-word; las demás siguen este orden. |
| `chart-cat-4` | `--chart-cat-4` | `#6d5bd8` / `#aea3fb` | Gráficos: color de la serie 5 (Lavanda). La serie 1 siempre usa accent-word; las demás siguen este orden. |
| `chart-cat-5` | `--chart-cat-5` | `#bd4b95` / `#ee9bd2` | Gráficos: color de la serie 6 (Orquídea). La serie 1 siempre usa accent-word; las demás siguen este orden. |
| `chart-cat-6` | `--chart-cat-6` | `#5f6b7d` / `#a5aebb` | Gráficos: color de la serie 7 (Pizarra). La serie 1 siempre usa accent-word; las demás siguen este orden. |
| `chart-cat-7` | `--chart-cat-7` | `#788f22` / `#bcd56b` | Gráficos: color de la serie 8 (Oliva). La serie 1 siempre usa accent-word; las demás siguen este orden. |
| `chart-cat-reserve` | `--chart-cat-reserve` | `#dc5d63` / `#f48f93` | Color de categoría de reserva: reemplaza al color de categoría que se parece al acento activo (ver chartSwaps). |
| `chart-grid` | `--chart-grid` | `rgba(0,0,0,.06)` / `rgba(255,255,255,.07)` | Gráficos: líneas guía del fondo. Más suaves que line para que los datos manden. |
| `chart-crosshair` | `--chart-crosshair` | `rgba(0,0,0,.30)` / `rgba(255,255,255,.34)` | Gráficos: línea vertical que sigue al puntero y franja de la categoría en barras. |
| `chart-up` | `--chart-up` | `#0f8a55` / `#5fd69b` | Gráficos: valor que sube (vela alcista, aumento en cascada, línea ascendente). Verde propio, distinto de la serie Verde menta. |
| `chart-down` | `--chart-down` | `#d23b35` / `#ff8f82` | Gráficos: valor que baja (vela bajista, disminución en cascada, línea descendente). |
| `chart-total` | `--chart-total` | `#3e4656` / `#c3cad6` | Gráficos: totales y subtotales de cascada, y valores sin cambio. |

## Spacing

| Token | CSS variable | Value | Usage |
| --- | --- | --- | --- |
| `space-2` | `--space-2` | `2px` | Separación dentro de un control segmentado. |
| `space-4` | `--space-4` | `4px` | Margen interior de un bloque de cita. |
| `space-6` | `--space-6` | `6px` | Entre icono y texto en un botón o chip. |
| `space-8` | `--space-8` | `8px` | Entre botones de una barra de acciones. |
| `space-10` | `--space-10` | `10px` | Entre icono y texto en la navegación. |
| `space-12` | `--space-12` | `12px` | Relleno vertical de filas y cabeceras de tarjeta. |
| `space-14` | `--space-14` | `14px` | Relleno del cuerpo de tarjeta y separación de campos en un formulario. |
| `space-16` | `--space-16` | `16px` | Relleno horizontal de tarjetas, filas y celdas; separación entre tarjetas. |
| `space-18` | `--space-18` | `18px` | Separación entre bloques de una vista. |
| `space-28` | `--space-28` | `28px` | Margen lateral del contenido en escritorio. En móvil baja a space-16. |

## Radius

| Token | CSS variable | Value | Usage |
| --- | --- | --- | --- |
| `radius-xs` | `--radius-xs` | `4px` | Rótulo sobre una trama y tecla. |
| `radius-chip` | `--radius-chip` | `6px` | Chip cuadrado de tipo. |
| `radius-event` | `--radius-event` | `10px` | Bloque de cita y botón de hora en el panel. |
| `radius-control` | `--radius-control` | `12px` | Campos de texto, ítems de navegación y días de la semana. |
| `radius-tile` | `--radius-tile` | `12px` | Marca del negocio y botón de usuario. |
| `radius-banner` | `--radius-banner` | `14px` | Avisos dentro de la página. |
| `radius-card` | `--radius-card` | `16px` | Tarjetas, chips altos de la app y bloques de la línea de tiempo. |
| `radius-dialog` | `--radius-dialog` | `20px` | Diálogos del panel. |
| `radius-sheet` | `--radius-sheet` | `36px` | Hoja inferior flotante de la app, a 8 px de los bordes. |
| `radius-pill` | `--radius-pill` | `999px` | Botones, chips, bandejas y avatares. |

## Shadow

| Token | CSS variable | Value | Usage |
| --- | --- | --- | --- |
| `shadow-flat` | `--shadow-flat` | `0 0 0 .67px rgba(0,0,0,.11),0 1px 2px rgba(0,0,0,.04)` / `0 0 0 1px rgba(255,255,255,.09)` | Tarjetas y botones secundarios: un filete y casi nada de sombra. |
| `shadow-hero` | `--shadow-hero` | `0 0 0 .67px rgba(0,0,0,.11),0 4px 18px rgba(0,0,0,.10)` / `0 0 0 1px rgba(255,255,255,.10)` | La única tarjeta elevada de una vista: el cliente actual, o quien sigue en la cola. |
| `shadow-cta` | `--shadow-cta` | `0 8px 36px rgba(0,0,0,.065)` / `0 0 0 0 rgba(0,0,0,0)` | Botón principal de 54 px en la app. Gris neutra, nunca teñida del color de marca. |
| `shadow-sel` | `--shadow-sel` | `0 2px 8px rgba(0,0,0,.10)` / `0 0 0 0 rgba(0,0,0,0)` | Píldora elegida: día, hora, opción de un control segmentado. |
| `shadow-pop` | `--shadow-pop` | `0 0 0 .67px rgba(0,0,0,.11),0 18px 48px -12px rgba(0,0,0,.22)` / `0 0 0 1px rgba(255,255,255,.12)` | Diálogos, hojas, menús y avisos. En oscuro no hay sombras: sobre negro no se ven, y la profundidad va en filetes. |

## Size

| Token | CSS variable | Value | Usage |
| --- | --- | --- | --- |
| `side-width` | `--side-width` | `244px` | Ancho de la barra lateral. |
| `top-height` | `--top-height` | `58px` | Alto de la barra superior. |
| `control-height` | `--control-height` | `36px` | Alto de botones del panel. |
| `control-height-sm` | `--control-height-sm` | `30px` | Alto de botones dentro de filas. |
| `input-height` | `--input-height` | `38px` | Alto de campos de texto y de botones de hora. |
| `agenda-hour` | `--agenda-hour` | `48px` | Alto de una hora en la agenda del panel. |
| `agenda-col` | `--agenda-col` | `148px` | Ancho mínimo de la columna de un profesional. |
| `m-button` | `--m-button` | `54px` | Alto del botón principal en la app. |
| `m-tray` | `--m-tray` | `52px` | Alto de una bandeja en la app: control segmentado y muestras de color, con relleno interior de 4 px. |
| `m-chip` | `--m-chip` | `60px` | Alto de un chip de sugerencia en la app. |
| `m-hour` | `--m-hour` | `78px` | Alto de una hora en la línea de tiempo de la app. |

## Typography

### Títulos

| Style | Size / line height | Weight | Usage |
| --- | --- | --- | --- |
| `kpi-number` | `30px / 1.15` | 800 | Cifra de un indicador: citas de hoy, en espera, ítems bajo mínimo. |
| `page-title` | `26px / 1.18` | 800 | Título de página del panel. Uno por vista; puede llevar una palabra en accent-word. |
| `dialog-title` | `16px / 1.4` | 750 | Título de diálogo y de panel lateral. |
| `card-title` | `14px / 1.5` | 700 | Título de tarjeta. |

### Texto

| Style | Size / line height | Weight | Usage |
| --- | --- | --- | --- |
| `lede` | `14.5px / 1.5` | 400 | Frase bajo el título de página, en ink-2. Máximo 68 caracteres por línea. |
| `body` | `14px / 1.5` | 400 | Texto base del panel. |
| `row-title` | `13.5px / 1.5` | 650 | Nombre del cliente, del servicio o del ítem en filas y tablas. |
| `control` | `13px / 1.5` | 650 | Etiqueta de botones. |
| `meta` | `12.5px / 1.5` | 400 | Metadatos bajo un título de fila, en ink-3. |
| `chip-text` | `12px / 1` | 650 | Texto de chips de estado. |
| `overline` | `11px / 1.5` | 700 | 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. |

### Datos

| Style | Size / line height | Weight | Usage |
| --- | --- | --- | --- |
| `clock` | `17px / 1` | 700 | Número del día en la tira de la semana. Cifras tabulares. |
| `data` | `12.5px / 1.6` | 600 | Horas, duraciones, cantidades, precios y códigos. Misma familia, con cifras tabulares (clase mono). |
| `count` | `11px / 1` | 700 | Contador en navegación y pestañas. |

### App móvil

| Style | Size / line height | Weight | Usage |
| --- | --- | --- | --- |
| `m-title` | `34px / 41px` | 800 | Título de pantalla en la app, con una palabra en accent-word. |
| `m-card-title` | `26px / 1.1` | 800 | Nombre del cliente en la tarjeta principal. |
| `m-row-title` | `15.5px / 1.3` | 700 | Nombre en un bloque de la línea de tiempo y en filas. |
| `m-body` | `15px / 1.45` | 400 | Texto bajo el título de pantalla. |
| `m-button` | `15.5px / 1` | 700 | Etiqueta del botón principal de 54 px. |
| `m-meta` | `13px / 1.4` | 400 | Segunda línea de un bloque o fila. |

## Style presets

Selected with `data-style` on any element. Each preset remaps the style tokens below.

| Preset | Attribute | Description |
| --- | --- | --- |
| Suave | `data-style="soft"` | El estilo por defecto: filetes finos en vez de bordes, sombras mínimas, botones píldora. |
| Con bordes | `data-style="bordered"` | Bordes nítidos de 1 px y ninguna sombra. Radios más cerrados. |
| Elevado | `data-style="elevated"` | Sombras en capas y ningún borde. En oscuro las superficies se aclaran por nivel. |
| Plano | `data-style="flat"` | Sin bordes ni sombras: las tarjetas se separan por un relleno teñido. Los overlays conservan un filete para despegarse de la página. |
| Vidrio | `data-style="glass"` | Superficies translúcidas con desenfoque y filetes claros, sobre un fondo de página degradado. |
| Brutal | `data-style="brutal"` | Bordes gruesos de tinta, sombras duras desplazadas y esquinas rectas. |

### Style tokens

| Token | CSS variable | Default (soft) | Usage |
| --- | --- | --- | --- |
| `radius-button` | `--radius-button` | `999px` | Botones. Píldora en el estilo suave. |
| `radius-input` | `--radius-input` | `12px` | Campos de texto, selects y casillas de hora. |
| `radius-badge` | `--radius-badge` | `999px` | Chips y pastillas de estado. |
| `radius-avatar` | `--radius-avatar` | `999px` | Avatares. data-radius no lo cambia: un avatar sigue siendo redondo salvo que el estilo diga otra cosa. |
| `radius-popover` | `--radius-popover` | `14px` | Menús, popovers y tooltips. |
| `border-width-card` | `--border-width-card` | `0px` | Grosor del borde de tarjetas. En suave es 0: el filete va en shadow-card. |
| `border-color-card` | `--border-color-card` | `var(--hair)` | Color del borde de tarjetas. |
| `border-width-control` | `--border-width-control` | `1px` | Grosor del borde de campos y controles. |
| `border-color-control` | `--border-color-control` | `var(--line-control)` | Color del borde de campos y controles. |
| `border-width-divider` | `--border-width-divider` | `1px` | Grosor de las líneas divisorias. |
| `border-color-divider` | `--border-color-divider` | `var(--line)` | Color de las líneas divisorias. |
| `shadow-card` | `--shadow-card` | `var(--shadow-flat)` | Sombra de tarjeta. Va junto a border-card: en suave es el filete de shadow-flat. |
| `shadow-raised` | `--shadow-raised` | `var(--shadow-hero)` | Tarjeta elevada. Incluye su propio filete. |
| `shadow-overlay` | `--shadow-overlay` | `var(--shadow-pop)` | Diálogos, hojas, menús y popovers. Incluye su propio filete. |
| `shadow-control` | `--shadow-control` | `var(--shadow-flat)` | Botón secundario y controles sin borde. |
| `shadow-selected` | `--shadow-selected` | `var(--shadow-sel)` | Opción elegida de un control segmentado, día u hora. |
| `shadow-inset` | `--shadow-inset` | `inset 0 1px 2px rgba(0,0,0,.06)` / `inset 0 0 0 1px rgba(255,255,255,.05)` | Zona hundida: pista, bandeja. |
| `shadow-inset-accent` | `--shadow-inset-accent` | `inset 0 0 0 1px var(--accent-line)` | Filete interior de marca: chip o día destacado. |
| `shadow-pinned-start` | `--shadow-pinned-start` | `6px 0 8px -6px rgba(0,0,0,.28)` / `1px 0 0 rgba(255,255,255,.10),6px 0 10px -6px rgba(0,0,0,.9)` | Borde de una columna fijada al inicio de una tabla cuando hay desplazamiento. |
| `shadow-pinned-end` | `--shadow-pinned-end` | `-6px 0 8px -6px rgba(0,0,0,.28)` / `-1px 0 0 rgba(255,255,255,.10),-6px 0 10px -6px rgba(0,0,0,.9)` | Borde de una columna fijada al final de una tabla cuando hay desplazamiento. |
| `surface-alpha` | `--surface-alpha` | `1` | Opacidad de las superficies (0 a 1). Solo baja en el estilo vidrio. |
| `surface-blur` | `--surface-blur` | `0px` | Desenfoque detrás de superficies translúcidas. |
| `surface-filter` | `--surface-filter` | `none` | backdrop-filter de tarjetas y overlays. none salvo en vidrio: un filtro activo crea un bloque contenedor. |
| `surface-card` | `--surface-card` | `var(--surface)` | Fondo de tarjetas. |
| `surface-control` | `--surface-control` | `var(--surface)` | Fondo de campos y botones secundarios. |
| `surface-overlay` | `--surface-overlay` | `var(--float)` | Fondo de diálogos, hojas, menús y popovers. |
| `surface-sunken` | `--surface-sunken` | `var(--sunken)` | Fondo hundido: pistas, zonas de arrastre. |
| `surface-backdrop` | `--surface-backdrop` | `var(--scrim)` | Velo detrás de diálogos y hojas. |
| `page-backdrop` | `--page-backdrop` | `none` | Imagen de fondo de la página. Solo el estilo vidrio la usa, para que la translucidez se note. |
| `focus-ring-width` | `--focus-ring-width` | `2px` | Grosor del anillo de foco. |
| `focus-ring-offset` | `--focus-ring-offset` | `2px` | Separación del anillo de foco. |
| `focus-ring-color` | `--focus-ring-color` | `var(--accent-ink)` | Color del anillo de foco. |
| `motion-duration` | `--motion-duration` | `180ms` | Duración de transiciones de estado. |
| `motion-ease` | `--motion-ease` | `cubic-bezier(.2,.8,.2,1)` | Curva de las transiciones. |
| `press-scale` | `--press-scale` | `.97` | Escala de un control al presionarlo. |
| `font-scale` | `--font-scale` | `1` | Factor opcional para escalar texto. Ningún token de texto lo usa todavía. |

### Density tokens

| Token | CSS variable | Default | Usage |
| --- | --- | --- | --- |
| `density` | `--density` | `1` | Factor de densidad sin unidad. Lo fija data-density; los altos y rellenos de abajo se multiplican por él. |
| `pad-control-x` | `--pad-control-x` | `16px` | Relleno horizontal de botones y campos. |
| `pad-card` | `--pad-card` | `16px` | Relleno de tarjetas. |
| `gap-density-sm` | `--gap-density-sm` | `8px` | Separación corta entre elementos de un grupo. |
| `gap-density` | `--gap-density` | `12px` | Separación entre elementos de una lista o formulario. |
| `gap-density-lg` | `--gap-density-lg` | `18px` | Separación entre bloques de una vista. |

Density levels (`data-density`):

- `data-density="compact"`: Compacta
- `data-density="normal"`: Normal
- `data-density="comfortable"`: Cómoda

Radius levels (`data-radius`):

- `data-radius="none"`: Sin radio
- `data-radius="sm"`: Pequeño
- `data-radius="md"`: Medio
- `data-radius="lg"`: Grande
- `data-radius="full"`: Completo