/* ═════════════════════════════════════════════════════════════════════════════
   tokens.css — la ÚNICA hoja de tokens de GRID (cara «Firme», Entrega 1).

   Antes había cuatro bloques `:root` que se pisaban: sistema.css (un tema claro de
   Stitch que ya no se veía en ninguna parte), marca.css:25 (los --g-*), marca.css:402
   (que reasignaba 38 tokens a oscuro) y marca.css:2440 (el LED). Quien leía uno creía
   saber el color, y lo decidía otro. Ahora están todos aquí y solo aquí:
   `test_tokens.php` falla si aparece un `:root` en otra hoja.

   Lo que NO es un `:root` y sigue en su sitio: las pieles por pantalla
   (`body.es-consola…` en marca.css) reasignan sus grises para el tablero LED, y app.js
   reescribe en <html> los tokens de marca con el color de cada club (y el modo, P2).
   ═══════════════════════════════════════════════════════════════════════════ */
/* `.siempre-oscuro` vuelve a poner los valores oscuros en modo claro: el televisor de la portada
   y la Pantalla para el público (`#arena/…`, `#tv`, que la ponen en <html>) se leen de lejos y se
   quedan oscuros siempre. Va aquí, junto a `:root`, para que los valores oscuros sigan escritos una
   sola vez. El bloque claro, más abajo, no toca ni a <html> ni a nada con esta clase. */
:root, .siempre-oscuro {
  color-scheme: dark;

  /* Marca. app.js los reescribe con el color del club (aplicarMarca). */
  --marca: #d32f2f;           /* relleno de acción */
  --sobre-marca: #ffffff;
  /* Rojo para TEXTO. P2, tarea 4: el #e53935 de antes daba 4,6 sobre el negro pero 4,40 sobre las
     tarjetas (`--papel`: «Administra», el `*` de los campos, «términos» en Crear cuenta) y 3,8 sobre
     `--alzado`. #ef5350 (el `--error` de oscuro) da 5,3 sobre `--papel` y 4,6 sobre `--alzado`, el
     mismo piso que pone aplicarMarca cuando el club tiene color. */
  --marca-osc: #f26b69;
  --marca-osc-2: #b71c1c;     /* hover del botón principal y bloque del «+» */
  --marca-clara: #f26b69;
  --marca-suave: #201727;
  --azul: #38bdf8; --azul-osc: #38bdf8; --azul-suave: #0e2237; --azul-linea: #143954;
  --marino: #0d0e12;
  --cinta: #0f1e3b; --sobre-cinta: #ffffff;   /* la cinta de la portada: el marino del logo con letra blanca en los dos temas */

  /* Superficies */
  --fondo: #0a1426;           /* el azul marino de GRID (el #0F1E3B del logo, más hondo) */
  --papel: #0f1c35;           /* tarjetas, ventanas */
  --hundido: #0c182d;
  --hundido-2: #13223f;
  --alzado: #1a2b4d;           /* botón secundario y avatar: el `--sup3` del recorrido */

  /* Tinta y filetes */
  --tinta: #e6e8f0; --tinta-2: #a3adc4; --tinta-3: #8895b0;
  --linea: #1c2b49; --linea-fuerte: #2a3d64;

  /* Estados: tintes casi marino con su filete; sobre el marino un pastel se lee como mancha. */
  --ok: #10b981;     --ok-tx: #34d399;     --ok-bg: #0b252f;     --ok-linea: #0c4943;
  --alerta: #fbbf24; --alerta-tx: #fbbf24; --alerta-bg: #272926; --alerta-linea: #524725;
  --error: #f26b69;  --error-bg: #231b2b;  --error-linea: #4f2733;
  --vivo: #d32f2f;
  /* Las bandas de las jornadas (tarjeta y cabecera): SIEMPRE oscuras, en claro y en oscuro. */
  --banda-1: rgba(10,20,38,.94); --banda-2: rgba(15,30,59,.35); --banda-suave: rgba(10,20,38,.55); --banda-hondo: rgba(10,20,38,.9);
  --banda-tx: #fff; --banda-tx-2: rgba(255,255,255,.85); --banda-viva: #f87171; --banda-lin: rgba(255,255,255,.4);

  /* Forma «Firme»: esquina corta. Ni la esquina viva de «A · Pista» ni la píldora de
     «B · Pista suave» (decisión del gestor, 1-oct). La píldora se queda solo donde de
     verdad es una píldora (puntos, avatares). */
  --r-sm: 6px; --r: 8px; --r-md: 8px; --r-lg: 8px; --r-xl: 8px; --r-full: 9999px;

  /* La elevación es el filete, no la sombra: sobre negro una sombra no se ve. */
  --sombra: none;
  --sombra-alta: 0 24px 60px rgba(3,8,20,.65);
  --sombra-activa: none;

  /* Espacio y medidas */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --toque: 44px;
  --barra: 57px;                      /* 56 de barra + 1 de filete: las pestañas se pegan justo debajo */
  --ancho: 1680px;
  --lateral: 236px;                   /* se va con la barra lateral en la Entrega 2 */

  /* Letra: Saira (negra, inclinada, en mayúsculas) firma los títulos grandes, Montserrat se lee, JetBrains Mono rotula. */
  --f-titulo: 'Montserrat', system-ui, sans-serif;
  --f-texto: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Los --g-* de la marca GRID (antes en marca.css:25). */
  --g-negro: #0a1426; --g-sup: #0c182d; --g-sup-baja: #0f1c35; --g-sup-alta: #13223f;
  --g-filete: #1c2b49; --g-filete-2: #2a3d64;
  --g-tinta: #e6e8f0; --g-tinta-2: #a3adc4;
  --g-rojo: #d32f2f; --g-rojo-osc: #b71c1c; --g-rojo-tx: #f26b69;   /* letra: ver --marca-osc */
  --g-cielo: #38bdf8;
  --g-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --g-firma: 'Saira', 'Montserrat', sans-serif;

  /* El tablero LED (antes en marca.css:2440). */
  --g-led: 'DSEG7', 'DSEG14', var(--g-mono);
  /* El LED se queda en el rojo de siempre: sus cifras son letra grande (3:1) y en la Pantalla para
     el público el #e53935 es la cara de GRID. En claro vuelve a ser el rojo de letra (abajo). */
  --led: #e53935;
  --led-brillo: 0 0 .05em currentColor, 0 0 .16em color-mix(in srgb, currentColor 50%, transparent);

  /* `--fuerte` es la letra más fuerte (blanco aquí, casi negro en claro); `--claro`/`--sobre-claro`,
     la franja gris de la cinta «Demo gratuita» y su letra. `--logo-bl`/`--logo-os`: cuál de los dos
     archivos del logo de GRID se ve (el blanco (`grid.svg`) en oscuro, el marino (`grid-marino.svg`) en claro); son el
     `display` de cada <img> (portada.css), así cambia sin JS y sin parpadeo. */
  --fuerte: #ffffff;
  --claro: #f4f4f6; --sobre-claro: #0a1426;
  --logo-bl: block; --logo-os: none;
  /* El Inicio (P1): el brillo detrás del héroe, la sombra de los aparatos dibujados y la de Elso.
     Los materiales de los aparatos (marco, base, pantalla del televisor) no cambian con el modo:
     un celular es oscuro en las dos. */
  --brillo: #16305e;
  --sombra-dev: 0 36px 70px rgba(2,6,16,.8);
  --lobo-f: drop-shadow(0 10px 10px rgba(3,8,20,.6));
  --aparato-luz: #34425f; --aparato: #25324d; --aparato-osc: #18233b; --aparato-fondo: #101a2e; --pantalla: #050b17;
}

/* ═══ Modo claro (P2) ══════════════════════════════════════════════════════
   Los mismos tokens en claro, para toda la app: fondo gris muy claro, tarjetas blancas, letra
   oscura y el mismo rojo (el de TEXTO un punto más oscuro, para que se lea sobre blanco). Los pone
   `data-tema` en <html> (el script del <head> de index.html y GRID_TEMA, portada.js).
   `:not(.siempre-oscuro)`: la Pantalla para el público pone esa clase en <html> y ahí manda el
   oscuro aunque el modo sea claro; dentro de la página, quien la lleve vuelve a declarar los oscuros
   (bloque de arriba) y les gana a los heredados. `test_tokens.php` lo comprueba.
   `--hundido-2` y `--alzado` son el `--sup2`/`--sup3` de la muestra: en claro, el de pasar el mouse
   es el más oscuro de los dos, igual que en oscuro es el más claro. */
html[data-tema="claro"]:not(.siempre-oscuro) {
  color-scheme: light;
  --fondo: #eef0f3; --papel: #ffffff; --hundido: #f6f7f9; --hundido-2: #f6f7f9; --alzado: #eceef2;
  /* `--tinta-3` más oscuro que el #8b91a0 de la muestra: ese daba 2,8:1 sobre blanco y las letras
     chicas de Legal y de «Crear cuenta» no se leían. P2, tarea 4: el #6b7080 de la P1 daba 4,32 sobre
     `--fondo` y 4,25 sobre `--alzado` («Terminada», las notas de Ajustes, «Todo guardado»). #646978
     da 4,80 / 4,72, y 5,5 sobre blanco; sigue un punto más claro que `--tinta-2`. */
  --tinta: #1b1e26; --tinta-2: #5a6070; --tinta-3: #646978;
  --linea: #e0e3e9; --linea-fuerte: #cbd0d8;
  --marca-osc: #c62828; --marca-clara: #c62828;
  /* `--ok-tx` un punto más oscuro que el #15803d de la muestra (P2, tarea 3): el chip «En juego» va sin
     fondo, sobre `--fondo`, y ahí daba 4,39:1. #147a3a da 4,75 sobre el fondo y 5,4 sobre blanco. */
  --ok-tx: #147a3a; --alerta-tx: #a65308;
  --g-negro: #eef0f3; --g-sup: #ffffff; --g-sup-baja: #f6f7f9; --g-sup-alta: #eceef2;
  --g-filete: #e0e3e9; --g-filete-2: #cbd0d8;
  --g-tinta: #1b1e26; --g-tinta-2: #5a6070; --g-rojo-tx: #c62828;
  --led: var(--g-rojo-tx);
  --fuerte: #0b0c10;
  --claro: #14161c; --sobre-claro: #ffffff;
  --logo-bl: none; --logo-os: block;
  --brillo: #ffffff; --sombra-dev: 0 28px 56px rgba(27,31,42,.22); --lobo-f: drop-shadow(0 10px 12px rgba(27,31,42,.25));
  /* Los tintes de fondo (P2): en oscuro son casi negros con su filete, y en claro esos manchones
     negros quedaban sobre las tarjetas blancas. Aquí, el tinte suave de cada color sobre blanco.
     `--marca-suave` es el rojo de GRID al 10 % (el mismo que deriva aplicarMarca con el color del
     club); `--azul-osc` y `--error` son de letra: #38bdf8 y #ef5350 no llegaban a 4,5:1 sobre blanco. */
  --marca-suave: #fbeaea;
  --azul: #0369a1; --azul-osc: #0369a1; --azul-suave: #e6f3fb; --azul-linea: #b9d4f0;
  --ok-bg: #ecf8f1; --ok-linea: #b5dfc6;
  --alerta-bg: #fdf5e6; --alerta-linea: #f0d6a3;
  --error: #c62828; --error-bg: #fdecec; --error-linea: #f2c4c4;
  --sombra-alta: 0 24px 60px rgba(27,31,42,.22);
  /* P2, tarea 2: `--ok`/`--alerta` también son LETRA (el reloj de Anotar, «Pendiente», «Organiza») y
     el verde y el ámbar de oscuro no llegan a 3:1 sobre blanco; aquí los de la muestra en claro, que
     también sirven de relleno con letra blanca (`--papel`) encima. `--azul` es el aro del foco: el
     cielo daba 2,1:1. El LED sin brillo: sobre blanco el halo solo emborronaba la cifra.
     P2, tarea 4: el ámbar de la muestra (#c2710c) daba 3,42 de letra sobre `--alerta-bg` («Pendiente»,
     «Sin jugadores») y 3,71 con letra blanca encima («Pausa», «Práctica»). #a65308, uno solo para
     relleno y letra (`--alerta-tx` igual): 5,0 sobre su tinte, 4,7 sobre el fondo y 5,4 con blanco. */
  --ok: #15803d; --alerta: #a65308;
  --led-brillo: none;
}