Humanity Augmented

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. El modo oscuro exige cobertura completa. Actívalo solo cuando superficies, texto, líneas, controles, imágenes y estados hayan pasado contraste y QA. No mezcles cards oscuras aisladas dentro de una experiencia clara.
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 humana. Prioriza escenas con personas, vínculos, oficio, cuidado y vida cotidiana, con beige dominante y acentos Wiwo integrados. No uses cyber city, cyborgs, sci-fi frío ni tecnología lejana: la capacidad debe sentirse humana, actual y reconocible.
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. Fuente única: outputs/tokens/wiwo.tokens.json */
/* 2. Build: npm run build:tokens */
/* 3. Consumo web */
@import "./tokens/wiwo.tokens.css";

html {
  font-family: var(--font-system);
  background: var(--surface);
  color: var(--ink);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-system);
  text-rendering: optimizeLegibility;
}

: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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  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);
  transition:
    transform var(--motion-fast) var(--ease-expressive),
    box-shadow var(--motion-fast) var(--ease-expressive),
    background var(--motion-fast) var(--ease-expressive);
}

.wiwo-button-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

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

.wiwo-button-primary[data-loading="true"] {
  pointer-events: none;
  color: transparent;
}

.wiwo-button-primary[data-loading="true"]::after {
  content: "";
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--shape-full);
  color: var(--on-accent);
  animation: wiwo-spin var(--motion-loop) linear infinite;
}

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

.wiwo-card[data-variant="inverse"] {
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}

.wiwo-glass {
  border: 1px solid var(--glass-stroke);
  border-radius: var(--shape-lg);
  background: var(--glass-fill);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.28);
}

.wiwo-gradient-band {
  min-height: 96px;
  border-radius: var(--radius-card);
  background: var(--wiwo-gradient-primary);
  background-size: 180% 180%;
  animation: wiwo-gradient var(--motion-loop) var(--ease-emphasized) infinite alternate;
}

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

.wiwo-icon-button {
  inline-size: 44px;
  block-size: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--shape-full);
  background: var(--control-surface);
  color: var(--ink);
}

.wiwo-input {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--shape-xs);
  background: var(--surface);
  color: var(--ink);
  padding: 0 var(--space-4);
  font: inherit;
}

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

.wiwo-field-error {
  margin-block-start: var(--space-2);
  color: var(--error);
  font-size: var(--step--1);
  font-weight: var(--weight-meta);
}

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

.wiwo-connected-group button {
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: var(--weight-nav);
  transition: background var(--motion-fast), color var(--motion-fast);
}

.wiwo-connected-group button[aria-selected="true"] {
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}

@keyframes wiwo-spin {
  to { transform: rotate(1turn); }
}

@keyframes wiwo-gradient {
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}