/* ============================================================================
   SPORTEKIA — tokens de color. FUENTE ÚNICA para la app Vue, las pantallas PHP,
   la landing y el panel work.

   POR QUÉ EXISTE ESTO (7-ago-2026): en el pabellón y en la calle, con luz fuerte,
   la interfaz oscura se convierte en un espejo y no se lee. El entrenador usa la
   app DE PIE EN LA PISTA, que es justo el peor sitio para un fondo negro.

   CÓMO SE USA
     · fondos/superficies ....... var(--sk-bg) / --sk-bg-2 / --sk-bg-3 / --sk-bg-4
     · texto .................... var(--sk-ink) y rgb(var(--sk-ink-rgb) / .55)
     · bordes y separadores ..... rgb(var(--sk-ink-rgb) / .12)
     · verde COMO RELLENO ....... background: var(--sk-brand); color: var(--sk-on-brand)
     · verde COMO TEXTO/ICONO ... color: var(--sk-brand-ink)   ← ¡no --sk-brand!

   ⚠️ LA REGLA QUE MÁS SE INCUMPLE: el verde de marca #3DBB7C sobre blanco da
   2,44:1 de contraste — ILEGIBLE. Por eso hay DOS tokens de marca: --sk-brand es
   el relleno (el verde se mantiene igual en los dos temas, con texto oscuro
   encima) y --sk-brand-ink es el verde legible como texto, que en claro se
   oscurece a #0F7A49 (5,38:1). Si escribes texto verde con --sk-brand, en claro
   no se ve.

   ⚠️ LO QUE NO ES TEMA: los colores de EQUIPACIÓN, las escalas de los mapas de
   calor y los trazos sobre el fotograma son DATOS, no decoración. No los pases a
   tokens: deben verse igual en claro y en oscuro o mienten.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* canal de tinta: todo el rgba(255,255,255,α) del código viejo se escribe
     rgb(var(--sk-ink-rgb) / α) y funciona solo en los dos temas */
  --sk-ink-rgb: 255 255 255;
  --sk-bg-rgb: 7 9 15;

  --sk-bg:    #07090f;   /* fondo de página */
  --sk-bg-2:  #0b0f16;   /* tarjeta / panel */
  --sk-bg-3:  #12161f;   /* superficie elevada, modal */
  --sk-bg-4:  #1a2035;   /* cabeceras de tabla, chips */
  /* mismo color que --sk-bg-4 pero en canal RGB: hace falta para DEGRADADOS
     que funden algo con la tarjeta, p.ej. la miniatura de la ultima grabacion. */
  --sk-bg-4-rgb: 26 32 53;
  --sk-bg-input: #0a0d14;

  --sk-ink:   #f2f5f3;
  --sk-ink-2: rgb(255 255 255 / .55);
  --sk-ink-3: rgb(255 255 255 / .38);
  --sk-line:  rgb(255 255 255 / .12);
  --sk-line-2:rgb(255 255 255 / .07);
  /* texto tenue (estados vacios, pistas). Ver la nota del tema claro. */
  --sk-ink-faint: rgb(255 255 255 / .28);
  /* tinta TEÑIDA de los bloques de conclusiones (crema y azulada) */
  --sk-ink-warm: #e8e0c8;
  --sk-ink-cool: #dbe3ea;

  --sk-brand:     #3dbb7c;
  --sk-brand-ink: #3dbb7c;
  --sk-on-brand:  #04120a;
  --sk-brand-soft: rgb(61 187 124 / .16);

  --sk-danger:     #ff7a7a;
  --sk-danger-str: #ff3b30;
  --sk-warn:       #ffcc00;
  --sk-warn-2:     #ff8a3d;
  --sk-info:       #00b4ff;
  --sk-accent:     #00ff6a;

  /* ACENTOS de las herramientas del dashboard. En oscuro son los de siempre.
     En claro se oscurecen: un #00FF6A o un #FFCC00 sobre blanco no se ven. */
  --sk-acc-green:  #3dbb7c;
  --sk-acc-teal:   #2de0d2;
  --sk-acc-lime:   #00ff6a;
  --sk-acc-blue:   #00b4ff;
  --sk-acc-amber:  #ffcc00;
  --sk-acc-orange: #ff8a3d;
  --sk-acc-purple: #8b2fff;
  --sk-acc-red:    #ff3b30;
  --sk-acc-gris:   #555555;

  --sk-shadow-rgb: 0 0 0;
  --sk-shadow:  0 6px 20px rgb(0 0 0 / .35);
  --sk-overlay: rgb(0 0 0 / .6);
}

:root[data-theme="light"] {
  color-scheme: light;

  --sk-ink-rgb: 16 22 30;
  --sk-bg-rgb: 255 255 255;

  /* fondo casi blanco a propósito: con sol de frente, cuanto más claro mejor */
  --sk-bg:    #f2f4f7;
  --sk-bg-2:  #ffffff;
  --sk-bg-3:  #ffffff;
  --sk-bg-4:  #e9edf2;
  --sk-bg-4-rgb: 233 237 242;
  --sk-bg-input: #ffffff;

  --sk-ink:   #10161e;              /* 16,5:1 sobre el fondo */
  --sk-ink-2: rgb(16 22 30 / .68);
  --sk-ink-3: rgb(16 22 30 / .48);
  --sk-line:  rgb(16 22 30 / .16);
  --sk-line-2:rgb(16 22 30 / .09);
  /* .28 de tinta sobre blanco da 2,2:1 y NO se lee: en claro sube a .52 */
  --sk-ink-faint: rgb(16 22 30 / .52);
  --sk-ink-warm: #4a3a14;
  --sk-ink-cool: #1c3040;

  --sk-brand:     #3dbb7c;          /* el relleno NO cambia: es la marca */
  --sk-brand-ink: #287b52;          /* mismo tono/saturacion de marca, mas oscuro (4,71:1) */
  --sk-on-brand:  #04120a;
  --sk-brand-soft: rgb(61 187 124 / .14);

  --sk-danger:     #c0392b;
  --sk-danger-str: #a52b1e;
  --sk-warn:       #8a6100;
  --sk-warn-2:     #a24b00;
  --sk-info:       #0b6ea8;
  --sk-accent:     #287b52;

  /* Mismo TONO y misma SATURACION que la marca, solo con menos luz: asi sigue
     siendo "el verde de Sportekia" y no otro verde. #287B52 = H150 S51% L32%,
     4,71:1 sobre el fondo claro. El anterior (#0F7A49) estaba al 78% de
     saturacion y por eso desentonaba con la marca. */
  --sk-acc-green:  #287b52;
  --sk-acc-teal:   #0e7c77;
  --sk-acc-lime:   #1f7a3d;
  --sk-acc-blue:   #0b6ea8;
  --sk-acc-amber:  #8a6100;
  --sk-acc-orange: #a24b00;
  --sk-acc-purple: #6a21c8;
  --sk-acc-red:    #c0392b;
  --sk-acc-gris:   #6b7280;

  --sk-shadow-rgb: 16 22 30;
  --sk-shadow:  0 6px 20px rgb(16 22 30 / .14);
  --sk-overlay: rgb(16 22 30 / .45);
}

/* el interruptor no debe hacer parpadear la pantalla entera */
:root { transition: background-color .18s ease, color .18s ease; }