/* Paleta de Fightlytic — la fuente única de color del sitio.
   La usan index.html y comparar.html: por eso vive acá y no dentro del
   <style> de una de las dos. Duplicarla era garantía de que se
   desincronizaran y un tema quedara roto en una sola página.
   La sirve app.py en /tema.css. */

/* ══════════════════════════════════════════════════════════════════
   PALETA — todo el color del sitio sale de acá.

   Regla: NUNCA escribir un color a mano en el resto del CSS. Un color
   suelto se ve bien en un tema y roto en el otro, y nadie se entera hasta
   que lo ve un usuario. scripts/check_colores.py falla si aparece uno.

   Las ternas (--rojo-rgb y compañía) existen porque la transparencia
   cambia en cada uso: rgba(var(--velo), .08) deja el alfa en el punto de
   uso, que es donde tiene que estar.

   El tema oscuro NO está duplicado en un @media: el script del <head>
   resuelve la preferencia del sistema y pone data-tema antes del primer
   pintado, así la paleta oscura vive en un solo lugar y no puede
   desincronizarse de sí misma.
   ══════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Superficies. En claro la elevación va al revés que en oscuro: el panel
     es MÁS blanco que la página, no más claro sobre negro. */
  --fondo:         #f5f6f8;
  --fondo-hundido: #eceef2;
  --panel:         #ffffff;
  --panel-alto:    #ffffff;
  --panel-2:       #f5f6f8;
  --panel-3:       #e9ecf1;

  /* Bordes */
  --borde-sutil:   #e9ecf1;
  --borde:         #dde1e8;
  --borde-fuerte:  #c3c9d4;

  /* Texto, del más fuerte al más tenue */
  /* Verificado con contraste real sobre --fondo (#f5f6f8), no a ojo.
     WCAG AA pide 4.5:1 para texto normal; el escalón más tenue da 4.95:1,
     así que hasta el metadato más chico se lee. */
  --texto:         #0b0e14;   /* 17.9:1 */
  --texto-2:       #21262f;   /* 14.0:1 */
  --texto-3:       #434a57;   /*  8.2:1 */
  --texto-4:       #565d6b;   /*  6.1:1 */
  --texto-tenue:   #646b79;   /*  5.0:1 */

  /* Acentos. Van más oscuros que en el tema oscuro: el mismo rojo que
     brilla sobre negro no llega a 4.5:1 de contraste sobre blanco. */
  --rojo:          #d02718;
  --rojo-vivo:     #d32c1e;
  --ambar:         #9a6600;
  --verde:         #0f7c44;
  /* Celeste, no el azul de antes (#1c5fb0). Es el PELEADOR A / rincón azul del
     Comparador y del Simulador — con el rojo o el naranja como rincón contrario.
     Se corrió al celeste cuando la marca pasó a ser azul: los dos valores
     quedaban a ΔE 11,7, o sea el mismo color a simple vista, y el color de
     "peleador A" no puede confundirse con el de la marca. Ahora están a 28. */
  --azul:          #0e70ad;
  --violeta:       #5a3ed6;
  --rosa:          #cf1f47;
  --magenta:       #8e2fc0;
  --naranja:       #c2490f;   /* 4.6:1 — peleador B del comparador */

  /* Variantes con rol propio (ver el bloque oscuro) */
  --ambar-claro:   #f0a500;
  --ambar-oscuro:  #c07f00;
  --ambar-texto:   #2e2100;
  --rojo-suave:    #a3190c;
  --rojo-tinte:    #fdecea;

  /* ── Color de marca ──────────────────────────────────────────────
     Rojo sangre (cambiado desde dorado el 2026-09-16; antes de eso fue
     azul). OJO CON ESTO: `--rojo` (más arriba) significa específicamente
     derrota / respuesta incorrecta / rincón rojo — se separó de la marca
     a propósito porque antes el mismo color hacía los dos trabajos y el
     ojo no distinguía "Fightlytic" de "3 derrotas". Ahora la marca ES
     roja de nuevo, pero con un hue distinto al de --rojo (este ronda los
     353-354°, --rojo los 8-9°: uno tira a carmesí/magenta, el otro a
     naranja) para que no sean el mismo tinte a ojo. Decisión del usuario,
     tomada sabiendo el riesgo — si en algún punto se confunden en la
     práctica, la solución NO es tocar --rojo, es separar más el hue.
     El hex del LOGO es #A81C2B y no aparece acá: dá 6,8:1 sobre el fondo
     claro (de sobra) pero sólo 2,6:1 sobre el oscuro, bien por debajo del
     piso de 3:1 para gráficos — el trade-off opuesto al del dorado
     anterior. Elegido a propósito igual, buscando el rojo sangre bien
     profundo. --marca de acá abajo sí cumple los suyos: en oscuro se
     aclara a un rosado/salmón porque a esa profundidad no se puede leer
     como texto sobre casi-negro; en claro se queda mucho más cerca del
     tono del logo. */
  --marca:         #c42132;   /* 5.4:1 — relleno de botones, texto fuerte */
  --marca-vivo:    #db2438;   /* 4.5:1 — acentos, bordes, hover */
  --marca-suave:   #941926;   /* 7.3:1 — texto chico sobre tinte */
  --marca-tinte:   #f7e8ea;   /* fondo lavado */
  /* Texto SOBRE un relleno de marca. No sale de la escala de texto: sobre un
     rojo saturado hay que ir al contrario del tema, no al color del tema. */
  --marca-texto:   #ffffff;

  /* El mismo rojo del LOGO (#A81C2B), pero como variable — para los botones
     primarios (nav, hero, buscador), que antes usaban --marca y por eso se
     veían de un tono distinto al de "FIGHT" al lado. No cambia con el tema
     a propósito, igual que el hex del logo: es el mismo trade-off de
     contraste (ver arriba), aceptado a propósito para que el botón haga
     juego con el logo. NO usar para texto suelto sobre la página — para
     eso está --marca, que sí es legible a esa escala. */
  --marca-logo:        #a81c2b;
  --marca-logo-hover:  #8f1724;
  --marca-logo-texto:  #ffffff;
  --marca-logo-rgb:    168, 28, 43;

  /* Única no-color de este archivo, a propósito: es el único lugar donde el
     tema ya se resuelve sin duplicar selector. "LYTIC" en el logo, blanco
     puro sobre casi-negro en tema oscuro, sufre irradiación —una forma
     clara sobre fondo oscuro se PERCIBE más grande que una oscura del
     mismo tamaño exacto (medido: las diez letras miden 113.52 unidades,
     sin excepción). En tema claro (negro sobre casi-blanco) el efecto no
     aparece, por eso acá vale 1. Lo usa .logo-lytic en estilo.css. */
  --logo-lytic-escala: 1;

  /* Ternas para transparencias */
  --marca-rgb:     196, 33, 50;
  --marca-vivo-rgb: 219, 36, 56;
  --rojo-rgb:      208, 39, 24;
  --rojo-vivo-rgb: 221, 53, 39;
  --ambar-rgb:     154, 102, 0;
  --verde-rgb:     15, 124, 68;
  --azul-rgb:      14, 112, 173;
  --violeta-rgb:   90, 62, 214;
  --magenta-rgb:   142, 47, 192;
  --naranja-rgb:   194, 73, 15;

  /* Velo: capa que separa una superficie de la de abajo. Se da vuelta con
     el tema — blanco aclara sobre oscuro, negro sombrea sobre claro. */
  --velo:          0, 0, 0;
  /* Sobre una FOTO no manda el tema: la imagen es oscura en los dos,
     y encima lleva un velo negro. El texto ahí va blanco siempre —
     atarlo a --texto lo volvía negro sobre negro en el tema claro. */
  --texto-media:   #ffffff;
  --velo-media:    255, 255, 255;
  /* Scrim: capa que oscurece (sombras, fondo de modal). Negro siempre. */
  --scrim:         0, 0, 0;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  /* Superficies, de la más honda a la más elevada */
  --fondo:         #0e0e12;
  --fondo-hundido: #131316;
  --panel:         #17171b;
  --panel-alto:    #1b1b20;
  --panel-2:       #232329;
  --panel-3:       #2c2c34;

  /* Bordes */
  --borde-sutil:   #232329;
  --borde:         #2c2c34;
  --borde-fuerte:  #3a3a44;

  /* Texto, del más fuerte al más tenue */
  --texto:         #ffffff;
  --texto-2:       #d6d6da;
  --texto-3:       #8b8b93;
  --texto-4:       #6a6a72;
  --texto-tenue:   #55555c;

  /* Acentos */
  --rojo:          #ea3324;
  --rojo-vivo:     #ff453a;
  --ambar:         #f5a623;
  --verde:         #2ecc71;
  --azul:          #3aa8e0;   /* ver el bloque claro: es el rincón azul, no la marca */
  --violeta:       #7c5cff;
  --rosa:          #ff375f;
  --magenta:       #bf5af2;
  --naranja:       #eb6834;   /* peleador B del comparador */

  /* Variantes con rol propio, no escalones de la escala: colores que sólo
     tienen sentido en pareja con otro (texto sobre un chip ámbar, tinte de
     fondo detrás del héroe). Ajustarlos a la escala general los rompía —
     el texto del badge de campeón quedaba ámbar sobre ámbar. */
  --ambar-claro:   #f7b733;
  --ambar-oscuro:  #e8991b;
  --ambar-texto:   #1a1204;
  --rojo-suave:    #ffb4af;
  --rojo-tinte:    #1c0a08;

  /* Marca — ver el bloque claro para por qué está separada del rojo */
  --marca:         #e56170;
  --marca-vivo:    #e7717e;
  --marca-suave:   #e9a5ac;
  --marca-tinte:   #3d1419;
  --marca-texto:   #27070a;

  /* Ver el bloque claro: mismo rojo que el logo en los dos temas. */
  --marca-logo:        #a81c2b;
  --marca-logo-hover:  #8f1724;
  --marca-logo-texto:  #ffffff;
  --marca-logo-rgb:    168, 28, 43;

  /* Ver el bloque claro. Acá sí hace falta: 0.96 compensa la irradiación
     del blanco puro sobre el fondo casi negro. */
  --logo-lytic-escala: 0.96;

  /* Ternas para transparencias */
  --marca-rgb:     229, 97, 112;
  --marca-vivo-rgb: 231, 113, 126;
  --rojo-rgb:      234, 51, 36;
  --rojo-vivo-rgb: 255, 69, 58;
  --ambar-rgb:     245, 166, 35;
  --verde-rgb:     46, 204, 113;
  --azul-rgb:      58, 168, 224;
  --violeta-rgb:   124, 92, 255;
  --magenta-rgb:   191, 90, 242;
  --naranja-rgb:   235, 104, 52;

  --velo:          255, 255, 255;
  /* Sobre una FOTO no manda el tema: la imagen es oscura en los dos,
     y encima lleva un velo negro. El texto ahí va blanco siempre —
     atarlo a --texto lo volvía negro sobre negro en el tema claro. */
  --texto-media:   #ffffff;
  --velo-media:    255, 255, 255;
  --scrim:         0, 0, 0;
}