Figma — Tokens extraídos (Stream_clone)
=========================================

Resumen
-------
Este documento recoge los tokens visuales (colores, tipografías, tamaños, radios) extraídos automáticamente desde el archivo Figma `Stream_clone` (Page 1 / Frame `Figma design - streamyard1.png`). Los valores son la mejor correspondencia extraída del archivo (hex, px) y se proponen como tokens para sincronizar con `tailwind.config.cjs`.

Colores (hex)
-------------
- studio-dark: #12151D  (fill_GX03CB)
- studio-bg:   #41444A  (fill_DLCT4G)
- studio-muted: #7E8791 (ej. fill_13MDCZ / configurado previamente)
- studio-muted-2: #77818F (fill_XG994A)
- studio-border: #D0D0CB (fill_9R9Y7U)
- studio-btn-blue: #98BFFE (fill_49OOFB - botón)
- studio-grabar-bg: #424E6A (fill_BWASHJ - botón "Grabar" fondo en Figma)
- studio-accent-alt: #122B54 (fill_BOQTE5)
- token-gray-light: #C7C6BF (fill_N03D5A)
- token-gray-mid: #C9D1D0 (fill_XEE5XM)
- token-gray-2: #CBCEC9 (fill_XEE5XM)

Tipografías y tamaños
---------------------
Extracciones desde los style_* en Figma (valores en px):
- style_2I2NT6: 12.8px  -> `figma-transmision` (ya en Tailwind)
- style_I6TCK2: 11.3px  -> `figma-personas` (ya en Tailwind)
- style_0GZP76: 14.2px  -> (UI small labels)
- style_CREH16: 15.5px  -> (heading small)
- style_4TUWSC: 13.2px  -> (botón / label)
- style_QUEM4J: 16.2px  -> (subtitle / section headings)
- style_2T7708 / style_10RTOQ / style_UT5PZD: 16-17px (varios headings)

Sugerencia: mantener en `tailwind.config.cjs` los tokens ya añadidos: `figma-transmision`, `figma-personas`, `figma-h1`, `figma-h2`, `figma-base`. Añadir `figma-btn` = 13.2px si se desea.

Radii (border-radius)
---------------------
- small-radius: 3.25px / 3.75px (varios elementos con borderRadius 3.25–3.75px)
- rounded-xl: ~12px (usado en Brand logo container)

Sombras
-------
El archivo Figma devuelto en la extracción no contenía propiedades de sombra explícitas en los estilos expuestos por la API (o estaban en layers rasterizados). Recomendación: extraer sombras manualmente desde la inspección en Figma o fijar una shadow scale en `tailwind.config.cjs` (ej. `shadow-sm`, `shadow-md`, `shadow-lg`) y ajustar según revisión visual.

Tokens JSON (next steps)
------------------------
He exportado también un JSON con los tokens detectados (colores, tipografías y radios) en `packages/studio-panel/src/design/figma-tokens.json`. Úsalo como fuente canónica para sincronizar `tailwind.config.cjs`.

Notas
-----
- Algunos elementos en el Figma son imágenes o composiciones (Image fills con imageRef). Esos se descargaron como PNGs en `packages/studio-panel/public/figma-assets/`.
- Para extracción exacta de sombras, letter-spacing y otras propiedades de texto/efecto es mejor acceder directamente al archivo Figma (layers) y exportar tokens desde el plugin "Design Tokens" o solicitar al diseñador que exporte la tabla de tokens.

Siguiente paso sugerido
----------------------
- Sincronizar `tailwind.config.cjs` con los valores listados arriba (colores exactos, agregar `figma-btn` si se desea).
- Opcional: ejecutar un paso de QA visual comparando capturas del header actual con la imagen Figma (usar Playwright snapshots).

Archivo con tokens: `packages/studio-panel/src/design/figma-tokens.json`