/* ══════════════════════════════════════════════════════════════════════════
   La marca ONDA. Valores del «Manual de Identidad ONDA», agosto 2026.
   Fuente: /srv/02-onda/diseno/identidad/

   VA APARTE DE onda.css A PROPÓSITO. onda.css lo comparte el panel de nodo2,
   y ONDA y nodo2 son dos marcas distintas (§05). Los tokens estructurales
   —espacio, forma, escala tipográfica— se comparten; el COLOR y la TIPOGRAFÍA
   no. Pintar el sistema compartido de cian le cambiaría la identidad a nodo2.

   ─── LAS REGLAS DEL MANUAL, que no son decorativas ───────────────────────

   EL CIAN NO ES UN COLOR, ES UN SIGNIFICADO.
   «El color Onda sólo aparece cuando algo está ocurriendo.»
       SÍ:  acción principal · elemento activo · dato que cambió ·
            progreso y conexión · IA trabajando · estado de llegada
       NO:  fondos amplios · texto corrido · bordes de tarjeta ·
            íconos decorativos · títulos completos · relleno de gráficos
   Proporción: 90% base, 8% superficies y grises, 2% acento.
   **Más de dos apariciones por pantalla y el cian deja de señalar.**

   NADA ENTRA POR ESCALA. Todo entra por desplazamiento y opacidad, entre 6 y
   12 px de recorrido. Es la regla 02 del sistema de movimiento y es la que
   más se rompe sin querer.

   UNA SOLA CURVA para el 100% de las transiciones. Excepción única: la señal
   en bucle, que siempre es linear.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── los seis colores. Ninguno decorativo ── */
  --onda-noche:     #05070E;   /* fondo maestro */
  --onda-profundo:  #0B1018;   /* superficies */
  --onda-bruma:     #8592A8;   /* texto secundario */
  --onda-espuma:    #E8EDF5;   /* texto y modo claro */
  --onda-cian:      #4AF3FF;   /* ALGO ESTÁ OCURRIENDO */
  --onda-marea:     #123A5C;   /* datos en reposo */

  /* ── derivados declarados en el manual ── */
  --onda-estela:      #48BECB;  /* halo de la señal. NUNCA relleno ni texto */
  --onda-cian-print:  #0B7C99;  /* el cian sobre fondo claro, ya legible */
  --onda-papel:       #F4F6FA;
  --onda-linea:       #D9DFE9;
  --onda-tinta:       #05070E;
  --onda-tinta-2:     #3E4A5C;
  --onda-tenue:       #5B677A;
  --onda-borde:       rgba(232, 237, 245, .12);
  --onda-borde-sutil: rgba(232, 237, 245, .09);

  /* ── estados. Son de dato, no de marca: por eso no son cian ── */
  --dato-positivo: #4CB98B;
  --dato-atencion: #E3B341;
  --dato-critico:  #E5675E;

  /* ── movimiento ── */
  --dur-micro: 160ms;
  --dur-medio: 320ms;
  --dur-largo: 640ms;          /* nada supera los 640 */
  --ease-onda: cubic-bezier(.22, 1, .36, 1);
  --stagger:   60ms;           /* máx. 8 pasos; más entran en bloque */

  /* ── tipografía ── */
  --onda-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --onda-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── roles semánticos: lo que usa la interfaz ── */
  --sup-fondo:      var(--onda-noche);
  --sup-superficie: var(--onda-profundo);
  --sup-borde:      var(--onda-borde);
  --sup-texto:      var(--onda-espuma);
  --sup-tenue:      var(--onda-bruma);
  --sup-accion:     var(--onda-cian);
  --sup-accion-sobre: var(--onda-espuma);   /* texto sobre el cian */
}

/* Modo claro. El manual lo contempla: «Espuma — texto y MODO CLARO», y para
   eso existe --onda-cian-print, porque el cian de pantalla sobre fondo claro
   no se lee. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --sup-fondo:      var(--onda-papel);
    --sup-superficie: #FFFFFF;
    --sup-borde:      var(--onda-linea);
    --sup-texto:      var(--onda-tinta);
    --sup-tenue:      var(--onda-tinta-2);
    --sup-accion:     var(--onda-cian-print);
    --sup-accion-sobre: #FFFFFF;
  }
}
:root[data-tema="claro"] {
  --sup-fondo:      var(--onda-papel);
  --sup-superficie: #FFFFFF;
  --sup-borde:      var(--onda-linea);
  --sup-texto:      var(--onda-tinta);
  --sup-tenue:      var(--onda-tinta-2);
  --sup-accion:     var(--onda-cian-print);
  --sup-accion-sobre: #FFFFFF;
}

/* Movimiento reducido. Regla 03 del manual: «el bucle se detiene en el
   fotograma final y el cian queda quieto». Las transiciones no se aceleran a
   1 ms — se apagan, que es lo que pide el manual. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 1ms; --dur-medio: 1ms; --dur-largo: 1ms; --stagger: 0ms; }
}