/* ============================================================================
   Valdra · Sistema de diseño — tokens

   Capa NUEVA y ADITIVA sobre app.css, no un reemplazo. Dos reglas gobiernan
   este archivo:

   1. Nombre semántico, no de color. `--surface-card` dice para qué sirve;
      `--white` diría de qué está hecho, y eso es lo que hace que un token se
      quede pegado al primer sitio donde se usó.

   2. Cuando ya existe un token equivalente en app.css (`--surface`, `--text`,
      `--border`…), el nuevo se define COMO ALIAS del viejo — `var(--surface)`,
      no un valor literal repetido. Así cualquier vista existente que siga
      usando `--surface` directamente y cualquier primitivo nuevo que use
      `--surface-card` leen exactamente el mismo color, en los dos temas, sin
      que este archivo tenga que declarar el tema oscuro dos veces para nada
      que app.css ya resuelve. Ver docs/ui/UI_AUDIT.md §5 para por qué se eligió
      este sentido y no el de redefinir las variables antiguas: es el mismo
      resultado con muchísimo menos riesgo de romper una de las otras 24 vistas
      que no se pueden ver en un navegador desde aquí.

   Lo que SÍ es enteramente nuevo —sin equivalente en app.css— lleva un valor
   propio, elegido para cumplir WCAG AA, y su variante oscura vive en
   themes.css: --accent-ai, --surface-elevated, --surface-command,
   --border-active, --radius-*, --shadow-*.
   ============================================================================ */

:root {
  /* ── Superficies ──────────────────────────────────────────────────────────
     surface-page es el lienzo detrás de todo; surface-card, una tarjeta en
     reposo; surface-elevated, una tarjeta que flota sobre otras (un menú, el
     compositor abierto); surface-command es la única superficie que NO seguía
     el tema antes de este sistema y sigue sin hacerlo a propósito: es donde
     vive el compositor de IA y el hero de Inicio, y el dueño la pidió oscura
     en los dos temas — ver DESIGN_SYSTEM.md. */
  --surface-page:      var(--bg);
  --surface-card:      var(--surface);
  --surface-elevated:  var(--surface);
  --surface-command:   #0B1220;
  --surface-command-2: #101828;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --text-primary:   var(--text);
  --text-secondary: var(--text-2);
  --text-on-command: #F9FAFB;
  --text-on-command-muted: rgba(249,250,251,.68);
  /* --text-muted ya existe en app.css con el mismo significado: se consume
     directamente, sin alias, para no crear dos nombres de la misma cosa. */

  /* ── Bordes ───────────────────────────────────────────────────────────── */
  --border-subtle: var(--border);
  --border-active: var(--accent);

  /* ── Acento operacional (ámbar de marca) ─────────────────────────────────
     Un solo acento "de producto", igual que en app.css: --accent-primary es
     alias directo de --accent y nunca diverge de él. Lo que cambia aquí es
     que se le pone nombre a la intención — "esto es el acento operacional de
     Valdra" — para que un primitivo nuevo no tenga que saber que en el fondo
     es la misma variable que ya usan los botones de toda la vida. */
  --accent-primary:       var(--accent);
  --accent-primary-hover: var(--accent-hover);
  --accent-primary-soft:  color-mix(in srgb, var(--accent) 12%, transparent);

  /* ── Acento de IA (azul/violeta eléctrico) ───────────────────────────────
     Éste SÍ es nuevo: no hay equivalente en app.css, y a propósito — la regla
     de marca de app.css prohíbe un segundo acento para el resto de la consola
     (ver UI_AUDIT.md §2). --accent-ai existe únicamente para marcar "esto lo
     está haciendo un agente / esto es una acción de IA" dentro de Inicio y de
     los primitivos de agente (AgentAvatar, AgentStatus, ActivityTimeline,
     AIComposer): un punto de estado, un anillo de foco del compositor, un
     borde de 1px en una insignia. Nunca un fondo grande ni un botón primario
     — ese lugar lo sigue ocupando el ámbar. Índigo 600 sobre blanco da
     8.3:1; su variante oscura (themes.css) da 7.9:1 sobre --surface-command. */
  --accent-ai:      #4F46E5;
  --accent-ai-soft: rgba(79,70,229,.10);

  /* ── Estado ───────────────────────────────────────────────────────────── */
  --accent-success: var(--success);
  --accent-warning: var(--warning);
  --accent-danger:  var(--error);

  /* ── Radio ────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ── Elevación ────────────────────────────────────────────────────────── */
  --shadow-card:     0 1px 2px rgba(17,24,39,.05), 0 1px 1px rgba(17,24,39,.03);
  --shadow-floating: 0 16px 40px -16px rgba(17,24,39,.22), 0 4px 12px -4px rgba(17,24,39,.10);
  --shadow-command:  0 28px 72px -28px rgba(4,9,18,.55), 0 10px 28px -10px rgba(4,9,18,.35);

  /* ── Movimiento ───────────────────────────────────────────────────────────
     Las tres duraciones que pidió el dueño, con la misma curva: entra rápido,
     sale despacio. --motion-fast para un realce de fila o un botón;
     --motion-base para abrir/cerrar un panel; --motion-slow para el
     compositor cambiando de estado (idle → cargando → resultado). */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --motion-fast: 120ms var(--ease-standard);
  --motion-base: 180ms var(--ease-standard);
  --motion-slow: 220ms var(--ease-standard);
}