Simple es poderoso.

1. Parte por tokens. Define color, tipografía, radio, spacing y motion antes de dibujar pantallas. Si una decisión no cabe en tokens, probablemente es una excepción de campaña.
2. Tokens como código. Cambia valores en tokens/wiwo.tokens.json y ejecuta npm run build:tokens. CSS, Tailwind y variables Figma son outputs, no fuente editorial.
3. Dark mode es sistema. Usa body[data-theme="dark"] para invertir --surface, --ink, --line y contenedores. No crees cards oscuras aisladas si el producto completo necesita modo nocturno.
4. Elige el modo. Editorial para contar, operativo para ejecutar. No mezcles un hero gigante dentro de una herramienta de trabajo.
5. Usa tácticas Wiwo Expressive. Aumenta jerarquía con tamaño, forma, contención tonal, grupos conectados y motion. No dependas solo del color.
6. Usa fotos como evidencia de futuro optimista. Prioriza escenas Wiwo con personas, producto visible, interiores beige y acentos verde/azul integrados. No usar cyber city, cyborgs, sci-fi frío ni tecnología lejana: el futuro debe verse lindo, humano y realista.
7. Lucide es la biblioteca de íconos base. Importa desde lucide react, usa SVG con currentColor, stroke 2px, tamaños 18/20/24/32 y aria label solo cuando el ícono sea el único contenido del control.
8. Controla contraste. Usa la tabla de pares aprobados: verde solo con #292929, azul con blanco o beige, y gradientes solo con overlay, glass o contenedor estable.
9. Anima por significado. Motion para confirmar, ordenar, revelar o guiar. Duración recomendada: 160ms micro, 280ms paneles, 420ms transiciones expresivas.
10. Accesibilidad como estilo. Implementa :focus-visible, labels persistentes, aria-invalid con texto específico y estados disabled/loading/error que se entiendan sin depender del color.

/* 1. Source of truth */
/* Editar: outputs/tokens/wiwo.tokens.json */

/* 2. Build */
/* npm run build:tokens */

/* 3. Consumo web */
@import "./tokens/wiwo.tokens.css";

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--focus-glow);
}

.wiwo-button-primary {
  min-height: 48px;
  border-radius: var(--radius-control);
  border: 1px solid var(--wiwo-green);
  background: var(--wiwo-green);
  color: var(--on-accent);
  font-family: var(--font-system);
  font-size: 1rem;
  font-weight: var(--weight-action);
}

.wiwo-button-primary:disabled,
.wiwo-input:disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}

.wiwo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  padding: 24px;
}

.wiwo-gradient-band {
  min-height: 96px;
  border-radius: var(--radius-card);
  background: var(--wiwo-gradient-primary);
}

.wiwo-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: currentColor;
  stroke-width: var(--icon-stroke);
}

.wiwo-input {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.wiwo-input[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-soft);
}

.wiwo-connected-group {
  display: inline-flex;
  border-radius: var(--shape-full);
  overflow: hidden;
  background: var(--surface-container);
}

.wiwo-connected-group button {
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  transition: border-radius var(--motion-medium), background var(--motion-fast);
}