{
  "name": "TecniMoto Design System",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Marca"
      }
    ],
    "tokens": [
      {
        "name": "tm-yellow",
        "value": "#FFD100",
        "usage": "Amarillo Seguridad (Pantone 109 C), ~40% de la marca. Fondo de CTAs principales, banners y señalética. Texto encima siempre en `tm-charcoal-800` (9.4:1). Nunca como texto sobre blanco."
      },
      {
        "name": "tm-orange",
        "value": "#FF6B35",
        "usage": "Naranja Racing (Pantone 1505 C), ~25%. Acentos, 'MOTO' del logo, carril Completos, foco. Como texto: solo sobre `tm-charcoal-800`/`tm-charcoal-900` (4.9:1). Blanco encima da 2.8:1: ver `text-on-orange`."
      },
      {
        "name": "tm-charcoal",
        "value": "#2D2D2D",
        "usage": "Carbón (Process Black 85%), ~30%. El negro de la marca: nunca #000. Texto principal y paneles de alta energía."
      },
      {
        "name": "tm-gray",
        "value": "#F5F5F5",
        "usage": "Gris Claro (Cool Gray 3 C), ~5%. Fondo de página y zonas de lectura."
      },
      {
        "name": "tm-white",
        "value": "#FFFFFF",
        "usage": "Blanco. Superficie de tarjetas sobre `tm-gray-100`; texto sobre carbón (13.8:1)."
      },
      {
        "name": "tm-gold",
        "value": "#C8941E",
        "usage": "Oro metálico (Pantone 871 C). Solo badge Chispero y tarjeta TecniPass impresa; no es color de UI."
      },
      {
        "name": "tm-yellow-100",
        "value": "#FFF6CC",
        "usage": "Tinte amarillo: fondo de Badge `yellow soft` y avisos suaves."
      },
      {
        "name": "tm-yellow-200",
        "value": "#FFEB99",
        "usage": "Tinte amarillo medio: hover sobre superficies amarillas suaves."
      },
      {
        "name": "tm-yellow-400",
        "value": "#FFD933",
        "usage": "Amarillo claro: inicio del degradado `--grad-yellow`."
      },
      {
        "name": "tm-yellow-500",
        "value": "#FFD100",
        "usage": "Igual a `tm-yellow`. Paso 500 de la escala."
      },
      {
        "name": "tm-yellow-600",
        "value": "#E6BC00",
        "usage": "Amarillo oscuro: borde de Checkbox/Switch encendidos y de Card `accent`."
      },
      {
        "name": "tm-yellow-700",
        "value": "#B8960A",
        "usage": "Amarillo sombra: texto de Badge `yellow soft` sobre `tm-yellow-100`. Sobre blanco da 2.8:1, no lo uses como texto ahí."
      },
      {
        "name": "tm-orange-100",
        "value": "#FFE3D6",
        "usage": "Tinte naranja: fondo de Badge `orange soft`."
      },
      {
        "name": "tm-orange-300",
        "value": "#FF9C73",
        "usage": "Naranja claro: ilustración y gráficos, no texto."
      },
      {
        "name": "tm-orange-500",
        "value": "#FF6B35",
        "usage": "Igual a `tm-orange`. Paso 500 de la escala."
      },
      {
        "name": "tm-orange-600",
        "value": "#E8521C",
        "usage": "Naranja oscuro: hover de acciones naranjas y `text-link` (3.7:1 sobre blanco, solo texto ≥24px o negritas grandes)."
      },
      {
        "name": "tm-orange-700",
        "value": "#C23E10",
        "usage": "Naranja profundo: texto naranja chico sobre blanco (5.3:1) y Badge `orange soft`."
      },
      {
        "name": "tm-ink",
        "value": "#1C1C1C",
        "usage": "Lo más oscuro permitido. Fondo de tableros (signage), celdas del ChispaCounter y tinte de sombras."
      },
      {
        "name": "tm-charcoal-900",
        "value": "#232323",
        "usage": "Carbón profundo: fondo de la app TecniPass y BottomNav."
      },
      {
        "name": "tm-charcoal-800",
        "value": "#2D2D2D",
        "usage": "Igual a `tm-charcoal`. Texto principal sobre blanco/gris/amarillo y fondo de tarjetas oscuras."
      },
      {
        "name": "tm-charcoal-700",
        "value": "#3A3A3A",
        "usage": "Bordes y divisores sobre fondos carbón; botón inactivo en tabs de la app."
      },
      {
        "name": "tm-charcoal-600",
        "value": "#4D4D4D",
        "usage": "Texto secundario sobre blanco (8.5:1) y `tm-gray-100` (7.8:1); etiquetas de formulario."
      },
      {
        "name": "tm-gray-600",
        "value": "#6B6B6B",
        "usage": "Gris de texto pequeño del Manual de Identidad (lámina 11). Notas, hints y metadatos sobre blanco (5.3:1) y `tm-gray-100` (4.9:1). No sobre carbón."
      },
      {
        "name": "tm-gray-500",
        "value": "#8A8A8A",
        "usage": "Gris medio para íconos, placeholders y texto de 24px o más. Sobre blanco da 3.5:1: para texto chico usa `tm-gray-600` (fondo claro) o `tm-gray-400` (fondo oscuro)."
      },
      {
        "name": "tm-gray-400",
        "value": "#B5B5B5",
        "usage": "Texto secundario sobre carbón (6.7:1) y `tm-charcoal-900` (7.7:1); borde de controles sin marcar."
      },
      {
        "name": "tm-gray-300",
        "value": "#D9D9D9",
        "usage": "Borde por defecto de Input/Select; texto terciario sobre carbón (9.8:1)."
      },
      {
        "name": "tm-gray-200",
        "value": "#ECECEC",
        "usage": "Bordes de tarjetas claras, superficies hundidas, riel de Tabs."
      },
      {
        "name": "tm-gray-100",
        "value": "#F5F5F5",
        "usage": "Igual a `tm-gray`. Fondo de página."
      },
      {
        "name": "tm-success",
        "value": "#2FAE5E",
        "usage": "Éxito: check-in completado, Moto Health OK (≥80). Texto blanco encima da 2.9:1 (falla, valor de la fuente): acompaña siempre con ícono o palabra; como texto, úsalo sobre carbón (4.8:1)."
      },
      {
        "name": "tm-warning",
        "value": "#FFB020",
        "usage": "Alerta: mantenimiento próximo, Moto Health 50 a 79. Texto encima en `tm-charcoal-800` (7.5:1)."
      },
      {
        "name": "tm-danger",
        "value": "#E03E2D",
        "usage": "Peligro: atención urgente, MAX enfermo (<50). Texto blanco encima 4.3:1 (solo ≥19px negrita). Acompaña con ícono o palabra."
      },
      {
        "name": "tm-info",
        "value": "#2D77E0",
        "usage": "Información neutra (Toast `info`). Texto blanco encima 4.4:1 (solo ≥19px negrita)."
      },
      {
        "name": "tm-tier-bronce",
        "value": "#B5763A",
        "usage": "Nivel Bronce (0 a 500 Chispas): escudo de TierBadge y chip de TecniPassCard."
      },
      {
        "name": "tm-tier-bronce-dark",
        "value": "#7A4D24",
        "usage": "Sombra del escudo Bronce (final del degradado de TierBadge)."
      },
      {
        "name": "tm-tier-plata",
        "value": "#B8BCC2",
        "usage": "Nivel Plata (500 a 1500): texto encima en `tm-charcoal-800` (7.2:1)."
      },
      {
        "name": "tm-tier-plata-dark",
        "value": "#8B9097",
        "usage": "Sombra del escudo Plata."
      },
      {
        "name": "tm-tier-oro",
        "value": "#F2B705",
        "usage": "Nivel Oro (1500+): texto encima en `tm-charcoal-800` (7.6:1)."
      },
      {
        "name": "tm-tier-oro-dark",
        "value": "#C28F00",
        "usage": "Sombra del escudo Oro."
      },
      {
        "name": "surface-page",
        "value": "{tm-gray-100}",
        "usage": "Fondo de página clara."
      },
      {
        "name": "surface-card",
        "value": "{tm-white}",
        "usage": "Tarjetas y paneles sobre `surface-page`."
      },
      {
        "name": "surface-dark",
        "value": "{tm-charcoal-800}",
        "usage": "Paneles de alta energía (MaxStatusCard, Toast, ServiceCard)."
      },
      {
        "name": "surface-dark-deep",
        "value": "{tm-ink}",
        "usage": "Fondos de signage y zonas más profundas."
      },
      {
        "name": "surface-accent",
        "value": "{tm-yellow}",
        "usage": "Paneles de máxima visibilidad: banners, promos, señalética."
      },
      {
        "name": "surface-sunken",
        "value": "{tm-gray-200}",
        "usage": "Zonas hundidas, rieles y separadores."
      },
      {
        "name": "text-primary",
        "value": "{tm-charcoal-800}",
        "usage": "Texto de cuerpo sobre `surface-page`, `surface-card` y `surface-accent`."
      },
      {
        "name": "text-secondary",
        "value": "{tm-charcoal-600}",
        "usage": "Texto secundario sobre `surface-page` y `surface-card`."
      },
      {
        "name": "text-muted",
        "value": "{tm-gray-600}",
        "usage": "Texto tenue y metadatos sobre `surface-page` y `surface-card` (4.9 a 5.3:1). Sale de la lámina 11 del manual (texto pequeño #6B6B6B)."
      },
      {
        "name": "text-on-dark",
        "value": "{tm-white}",
        "usage": "Texto sobre `surface-dark` y `surface-dark-deep`."
      },
      {
        "name": "text-on-yellow",
        "value": "{tm-charcoal-800}",
        "usage": "SIEMPRE carbón sobre amarillo (`surface-accent`, botones primary)."
      },
      {
        "name": "text-on-orange",
        "value": "{tm-charcoal-800}",
        "usage": "Texto sobre naranja: SIEMPRE carbón (4.9:1). Blanco sobre naranja da 2.8:1 y no pasa. Corrección vigente de la ficha canónica del 30 de julio de 2026."
      },
      {
        "name": "text-accent",
        "value": "{tm-orange}",
        "usage": "Énfasis ('MOTO') sobre fondos carbón (4.9:1). Sobre blanco solo en display ≥24px."
      },
      {
        "name": "text-link",
        "value": "{tm-orange-600}",
        "usage": "Enlaces sobre blanco (3.7:1): solo subrayados y a 18px o más. En texto corrido usa `tm-orange-700` (5.3:1)."
      },
      {
        "name": "border-default",
        "value": "{tm-gray-300}",
        "usage": "Borde de inputs y tarjetas claras en reposo."
      },
      {
        "name": "border-strong",
        "value": "{tm-charcoal-800}",
        "usage": "Bordes marcados (2 a 3px) estilo señalética, botón outline."
      },
      {
        "name": "border-on-dark",
        "value": "{tm-charcoal-600}",
        "usage": "Bordes sobre fondos carbón."
      },
      {
        "name": "action-primary-bg",
        "value": "{tm-yellow}",
        "usage": "Fondo de la acción principal (Button primary)."
      },
      {
        "name": "action-primary-fg",
        "value": "{tm-charcoal-800}",
        "usage": "Texto de la acción principal."
      },
      {
        "name": "action-secondary-bg",
        "value": "{tm-charcoal-800}",
        "usage": "Fondo de la acción secundaria."
      },
      {
        "name": "action-secondary-fg",
        "value": "{tm-white}",
        "usage": "Texto de la acción secundaria."
      },
      {
        "name": "action-accent-bg",
        "value": "{tm-orange}",
        "usage": "Fondo de la acción de acento (Carril Express, Completos)."
      },
      {
        "name": "action-accent-fg",
        "value": "{tm-charcoal-800}",
        "usage": "Texto de la acción de acento (Button accent, carril Completos). Carbón sobre naranja, 4.9:1."
      },
      {
        "name": "chispa-color",
        "value": "{tm-yellow}",
        "usage": "Color de la moneda Chispa y de la energía (ChispaBolt, contadores)."
      },
      {
        "name": "focus-ring",
        "value": "{tm-orange-500}",
        "usage": "Anillo de foco: naranja sólido, 3:1 o más sobre blanco y carbón; en controles va como halo de 3px."
      }
    ]
  },
  "type": {
    "fonts": [
      {
        "family": "Racing Sans One",
        "file": "fonts/RacingSansOne-Regular.ttf",
        "weight": "400",
        "style": "normal"
      },
      {
        "family": "Bebas Neue",
        "file": "fonts/BebasNeue-Regular.woff2",
        "weight": "400",
        "style": "normal"
      },
      {
        "family": "Montserrat",
        "file": "fonts/Montserrat-Variable.woff2",
        "weight": "100 900",
        "style": "normal"
      },
      {
        "family": "Montserrat",
        "file": "fonts/Montserrat-Variable-Italic.woff2",
        "weight": "100 900",
        "style": "italic"
      }
    ],
    "families": {
      "display": "\"Racing Sans One\", \"Bebas Neue\", system-ui, sans-serif",
      "condensed": "\"Bebas Neue\", \"Racing Sans One\", system-ui, sans-serif",
      "body": "\"Montserrat\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "display-xl",
            "fontSize": "72px",
            "lineHeight": 0.95,
            "fontWeight": 400,
            "usage": "Hero racing en MAYÚSCULAS, itálica, con `skew-racing`.",
            "fontStyle": "italic",
            "letterSpacing": "0.01em",
            "sample": "TU MOTO SANA"
          },
          {
            "name": "display-lg",
            "fontSize": "52px",
            "lineHeight": 0.95,
            "fontWeight": 400,
            "usage": "Titular de portada y señalética.",
            "fontStyle": "italic",
            "letterSpacing": "0.01em",
            "sample": "EXPRESS LANE"
          },
          {
            "name": "display-md",
            "fontSize": "36px",
            "lineHeight": 0.95,
            "fontWeight": 400,
            "usage": "Titular de sección, nombres de pantalla.",
            "fontStyle": "italic",
            "letterSpacing": "0.01em",
            "sample": "Menú de Servicios"
          },
          {
            "name": "display-sm",
            "fontSize": "17px",
            "lineHeight": 1.05,
            "fontWeight": 400,
            "usage": "Nombre de servicio en ServiceCard y títulos de tarjeta.",
            "fontStyle": "italic",
            "sample": "Express Oil Change"
          }
        ]
      },
      {
        "name": "Condensed",
        "family": "condensed",
        "styles": [
          {
            "name": "numeral",
            "fontSize": "56px",
            "lineHeight": 0.9,
            "fontWeight": 400,
            "usage": "Números protagonistas: minutos, precios en señalética, contador de recompensa.",
            "letterSpacing": "0.01em",
            "sample": "SERVICIO EN 30 MIN"
          },
          {
            "name": "price",
            "fontSize": "20px",
            "lineHeight": 1,
            "fontWeight": 400,
            "usage": "Precio en cápsula de ServiceCard y montos en listas.",
            "sample": "$49.900"
          }
        ]
      },
      {
        "name": "Headings",
        "family": "body",
        "styles": [
          {
            "name": "h1",
            "fontSize": "32px",
            "lineHeight": 1.15,
            "fontWeight": 700,
            "usage": "H1 de páginas y documentos.",
            "sample": "Mantenimiento"
          },
          {
            "name": "h2",
            "fontSize": "24px",
            "lineHeight": 1.15,
            "fontWeight": 700,
            "usage": "H2.",
            "sample": "TecniPass Pro"
          },
          {
            "name": "h3",
            "fontSize": "20px",
            "lineHeight": 1.15,
            "fontWeight": 700,
            "usage": "H3.",
            "sample": "Historial"
          }
        ]
      },
      {
        "name": "Text",
        "family": "body",
        "styles": [
          {
            "name": "body-lg",
            "fontSize": "18px",
            "lineHeight": 1.5,
            "fontWeight": 400,
            "usage": "Cuerpo destacado e intros.",
            "sample": "Tu moto sana, tú sin parar."
          },
          {
            "name": "body",
            "fontSize": "16px",
            "lineHeight": 1.5,
            "fontWeight": 400,
            "usage": "Cuerpo por defecto.",
            "sample": "Gana Chispas en cada servicio."
          },
          {
            "name": "body-sm",
            "fontSize": "14px",
            "lineHeight": 1.5,
            "fontWeight": 400,
            "usage": "Descripciones y detalle secundario.",
            "sample": "Cambio de aceite express"
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": 1.5,
            "fontWeight": 500,
            "usage": "Metadatos, fechas, pies.",
            "sample": "Hace 2 días"
          },
          {
            "name": "overline",
            "fontSize": "11px",
            "lineHeight": 1.2,
            "fontWeight": 800,
            "usage": "Etiquetas de señalética en MAYÚSCULAS.",
            "letterSpacing": "0.14em",
            "sample": "CHISPAS ACUMULADAS"
          },
          {
            "name": "button",
            "fontSize": "15px",
            "lineHeight": 1,
            "fontWeight": 700,
            "usage": "Texto de botones y tabs en MAYÚSCULAS.",
            "letterSpacing": "0.03em",
            "sample": "AGENDAR CITA"
          }
        ]
      }
    ]
  },
  "spacing": {
    "note": "Base 4px.",
    "tokens": [
      {
        "name": "space-0",
        "value": "0",
        "usage": "Sin espacio."
      },
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Gap mínimo entre ícono y texto."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Gap interno de chips y botones."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Gap entre filas de lista."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Padding de tarjetas compactas y márgenes de pantalla móvil."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "Padding de modales y toasts."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Padding por defecto de Card."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Separación entre bloques."
      },
      {
        "name": "space-10",
        "value": "40px",
        "usage": "Márgenes de tablero (signage)."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Separación de secciones."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Aire en portadas y hero."
      },
      {
        "name": "space-20",
        "value": "80px",
        "usage": "Separación máxima de secciones."
      }
    ]
  },
  "radius": {
    "note": "Esquinas funcionales: franjas a 0, chips a pill.",
    "tokens": [
      {
        "name": "radius-none",
        "value": "0",
        "usage": "Banners, franjas y HazardBar: corte recto racing."
      },
      {
        "name": "radius-sm",
        "value": "4px",
        "usage": "Cápsulas de precio, checkbox, celdas pequeñas."
      },
      {
        "name": "radius-md",
        "value": "8px",
        "usage": "Botones, inputs, selects."
      },
      {
        "name": "radius-lg",
        "value": "12px",
        "usage": "Cards, ServiceCard, toasts."
      },
      {
        "name": "radius-xl",
        "value": "18px",
        "usage": "Paneles, hero cards, MaxStatusCard, modales."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Chips, badges, ChispaPill, contadores y barras de progreso."
      }
    ]
  },
  "shadow": {
    "note": "Tinte carbón, nunca negro puro. Sombra dura racing y glow de energía.",
    "tokens": [
      {
        "name": "shadow-sm",
        "value": "0 1px 2px rgba(28,28,28,0.08)",
        "usage": "Reposo de botones y filas de lista."
      },
      {
        "name": "shadow-md",
        "value": "0 4px 12px rgba(28,28,28,0.12)",
        "usage": "Tarjetas claras y hover de botones."
      },
      {
        "name": "shadow-lg",
        "value": "0 10px 28px rgba(28,28,28,0.16)",
        "usage": "Tarjetas oscuras, MaxStatusCard, Toast, hover de ServiceCard."
      },
      {
        "name": "shadow-xl",
        "value": "0 18px 48px rgba(28,28,28,0.22)",
        "usage": "Modales y TecniPassCard."
      },
      {
        "name": "shadow-hard",
        "value": "4px 4px 0 #2D2D2D",
        "usage": "Sombra dura racing tipo sticker/señalética, en carbón (`tm-charcoal-800`)."
      },
      {
        "name": "shadow-hard-yellow",
        "value": "4px 4px 0 #FFD100",
        "usage": "Sombra dura amarilla sobre fondos carbón."
      },
      {
        "name": "glow-chispa",
        "value": "0 0 24px rgba(255,209,0,0.55)",
        "usage": "Brillo de energía: recompensas de Chispas, MAX celebrando, RewardPopup."
      },
      {
        "name": "glow-orange",
        "value": "0 0 20px rgba(255,107,53,0.5)",
        "usage": "Brillo naranja para celebraciones secundarias."
      }
    ]
  },
  "borderWidth": {
    "note": "Grosor de bordes. Marcados, estilo señalética.",
    "tokens": [
      {
        "name": "border-width",
        "value": "2px",
        "usage": "Borde estándar de controles y tarjetas de servicio."
      },
      {
        "name": "border-width-bold",
        "value": "3px",
        "usage": "Borde de énfasis: avatar de MAX, estados."
      }
    ]
  },
  "container": {
    "note": "Anchos máximos de contenedor.",
    "tokens": [
      {
        "name": "container-sm",
        "value": "480px",
        "usage": "Pantallas móviles y formularios."
      },
      {
        "name": "container-md",
        "value": "768px",
        "usage": "Contenido de lectura."
      },
      {
        "name": "container-lg",
        "value": "1080px",
        "usage": "Layouts de escritorio."
      }
    ]
  },
  "fontSize": {
    "note": "Escala tipográfica base 16px, como variables sueltas. Para estilos completos usa las clases de Tipografía.",
    "tokens": [
      {
        "name": "fs-display-xl",
        "value": "4.5rem",
        "usage": "72px. Hero racing."
      },
      {
        "name": "fs-display-lg",
        "value": "3.25rem",
        "usage": "52px. Titular de portada."
      },
      {
        "name": "fs-display-md",
        "value": "2.25rem",
        "usage": "36px. Titular de sección."
      },
      {
        "name": "fs-h1",
        "value": "2rem",
        "usage": "32px. H1."
      },
      {
        "name": "fs-h2",
        "value": "1.5rem",
        "usage": "24px. H2."
      },
      {
        "name": "fs-h3",
        "value": "1.25rem",
        "usage": "20px. H3."
      },
      {
        "name": "fs-body-lg",
        "value": "1.125rem",
        "usage": "18px. Cuerpo destacado."
      },
      {
        "name": "fs-body",
        "value": "1rem",
        "usage": "16px. Cuerpo."
      },
      {
        "name": "fs-body-sm",
        "value": "0.875rem",
        "usage": "14px. Descripciones."
      },
      {
        "name": "fs-caption",
        "value": "0.75rem",
        "usage": "12px. Pies y metadatos."
      },
      {
        "name": "fs-overline",
        "value": "0.6875rem",
        "usage": "11px. Etiquetas de señalética en mayúsculas."
      }
    ]
  },
  "lineHeight": {
    "note": "Alturas de línea.",
    "tokens": [
      {
        "name": "lh-tight",
        "value": "0.95",
        "usage": "Display y números grandes."
      },
      {
        "name": "lh-snug",
        "value": "1.15",
        "usage": "Títulos."
      },
      {
        "name": "lh-normal",
        "value": "1.5",
        "usage": "Cuerpo."
      },
      {
        "name": "lh-relaxed",
        "value": "1.65",
        "usage": "Textos largos."
      }
    ]
  },
  "letterSpacing": {
    "note": "Tracking.",
    "tokens": [
      {
        "name": "ls-display",
        "value": "0.01em",
        "usage": "Display."
      },
      {
        "name": "ls-overline",
        "value": "0.14em",
        "usage": "Overline y etiquetas en mayúsculas."
      },
      {
        "name": "ls-button",
        "value": "0.03em",
        "usage": "Botones y tabs."
      },
      {
        "name": "ls-body",
        "value": "0",
        "usage": "Cuerpo."
      }
    ]
  },
  "fontWeight": {
    "note": "Pesos de Montserrat.",
    "tokens": [
      {
        "name": "fw-regular",
        "value": "400",
        "usage": "Cuerpo."
      },
      {
        "name": "fw-medium",
        "value": "500",
        "usage": "Etiquetas de switch."
      },
      {
        "name": "fw-semibold",
        "value": "600",
        "usage": "Énfasis suave."
      },
      {
        "name": "fw-bold",
        "value": "700",
        "usage": "Botones, títulos de cuerpo."
      },
      {
        "name": "fw-extrabold",
        "value": "800",
        "usage": "Overlines y estados."
      }
    ]
  },
  "skew": {
    "note": "Inclinación del 'movimiento' de marca.",
    "tokens": [
      {
        "name": "skew-racing",
        "value": "-8deg",
        "usage": "Skew de wordmark, titulares y franjas: aplica con `transform: skewX(var(--skew-racing))`."
      }
    ]
  }
}