Colores

La paleta está definida en el @theme de globals.css y disponible como variable CSS (var(--color-cw-blue)) y como utilidad de Tailwind (bg-cw-blue, text-cw-orange…).

Fuente oficial: el brand kit de Charly's Way. Los cuatro primarios coinciden exactamente con la marca. Los tintes y derivados (-50, -100, -600, -700…) no están en el brand kit: se derivan aquí para cumplir contraste.

Marca

Los cuatro colores que son Charly's Way, más sus variantes de hover, borde y fondo.

Azul Charly--color-cw-blue#0B89B0Primario de marca. Enlaces, foco, progreso, acento del tutor. Como texto usa cw-blue-700.

Azul 700--color-cw-blue-700#086A8AHover/pressed del azul. Azul como texto pequeño (pasa AA).

Azul 100--color-cw-blue-100#C6E5EEBorde/línea suave azul, fondo de barra de progreso, dashline.

Azul 50--color-cw-blue-50#E6F4F9Fondo de chip/badge azul, fondo activo de navegación.

Naranja Charly--color-cw-orange#F47149CTA principal. Acento del alumno. Anillo de foco. Como texto blanco encima usa cw-orange-700.

Naranja 600--color-cw-orange-600#E25D33Hover del naranja. Naranja oscuro como texto.

Naranja 700--color-cw-orange-700#C84B22Naranja con texto blanco encima que pasa AA (4,68:1): «Seguir», etiqueta «HOY».

Naranja 100--color-cw-orange-100#FDDACBBorde suave naranja.

Naranja 50--color-cw-orange-50#FEEDE6Fondo de badge naranja, lección actual, halo.

Azul oscuro--color-cw-dark#243156Color de texto principal.

Oscuro 2--color-cw-dark-2#3A4570Texto secundario, un nivel más claro.

Deep--color-cw-deep#105063Variante azul oscuro reservada.

El azul de marca como TEXTO → usa cw-blue-700

cw-blue (#0B89B0) sobre blanco da solo ~4,03:1 y falla WCAG AA para texto pequeño (<18px). Para eyebrows, enlaces y etiquetas pequeñas usa text-cw-blue-700 (#086A8A, ~5,8:1). El cw-blue sigue siendo correcto para fondos, bordes, anillo de foco y progreso (no es texto).

Neutros

Superficies, bordes y texto silenciado. Son neutros fríos (grises azulados), alineados con la landing. El canvas base de la app es blanco.

Fondo base--color-cw-bg#FFFFFFFondo de página y de tarjetas.

Fondo suave--color-cw-bg-soft#EEF2F7Acento frío: hover de fila, chip, skeleton, cabecera de tabla.

Relleno claro--color-cw-bg-cream#F5F8FCRelleno frío aún más claro (paneles e insets).

Línea--color-cw-line#E1E7EFBorde por defecto de cards, inputs y filas.

Línea 2--color-cw-line-2#ECF0F6Separador alternativo.

Silenciado--color-cw-muted#595959Texto silenciado y pistas (hints). Pasa AA en texto pequeño.

Semántica y estados

Verde de confirmación y ámbar de advertencia. Ambos son colores de marca oscurecidos para cumplir AA.

Éxito--color-cw-success#017A53Confirmación, «completado». 5,37:1 sobre blanco.

Éxito 50--color-cw-success-50#E5F4EDFondo de chip de éxito.

Advertencia--color-cw-warning#9C4E01Advertencia / pendiente. ≈6:1 sobre blanco.

Advertencia 50--color-cw-warning-50#FBEFD9Fondo de chip de advertencia.

Error (destructivo)

Rojo de marca para borrar, errores de validación y banners de error.

Danger--color-cw-danger#B03413Borde de input en error, acciones de borrar, borde del banner. ≈6,27:1 sobre blanco.

Danger 50--color-cw-danger-50#FCE6E1Fondo del banner de error, hover suave de botones destructivos.

Danger 100--color-cw-danger-100#F7D0C6Paso hover de la familia danger, tinte de fila de retraso.

Usa siempre el token (text-cw-danger / bg-cw-danger-50 / border-cw-danger), no el hex suelto.

Estados del feedback de audio

La píldora .cw-fb-badge del ticket de feedback usa esta combinación de fondo y texto según su estado:

Estado	Fondo	Texto
Pendiente pending	#FBEFD9	#8C5414
En revisión in_review	#E6F4F9	#086A8A
Respondido responded	#FEEDE6	#E25D33
Archivado closed	#ECECE5	#555555

Reglas de color

1. Siempre desde la paleta. No introduzcas un hex nuevo sin añadirlo antes al @theme.
2. Azul como texto → cw-blue-700. El cw-blue solo para fondos, bordes, foco y progreso.
3. Fondo claro siempre. No hay modo oscuro (color-scheme: light).
4. Contraste mínimo AA en todo el texto.