/* =====================================================================
   tokens.css · los valores de diseño, en un solo lugar.

   Claro por omisión: fondo limpio, colores muy vivos y piezas gorditas. El
   tema oscuro solo cambia superficies y texto. Los colores de jugador NO
   cambian con el tema: se usan como relleno sólido con --tinta encima.

   Regla de la casa: lo que tiene RELIEVE (un canto de color abajo) se puede
   tocar; lo que es plano solo se lee.
   ===================================================================== */

/* La tipografía de la marca: Pally (fontshare.com/fonts/pally), servida
   desde la carpeta del propio sitio, sin pedirle nada a internet.

   Son dos archivos en assets/fuentes/, uno por grosor (ver LEEME.txt ahí):

     Pally-Bold.woff2      títulos, botones y etiquetas
     Pally-Medium.woff2    el texto normal

   No hay un tercero: la app no usa ningún texto más fino que Medium.

   Cada grosor es independiente: si falta un archivo, lo que usa ese grosor
   cae a la letra de respaldo de --fuente y lo demás sigue en Pally. Nada se
   rompe por un archivo que no esté. */
@font-face {
  font-family: "Pally";
  src: url("../fuentes/Pally-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pally";
  src: url("../fuentes/Pally-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sin esto el navegador dibuja SUS controles (barras, listas) en el tema
     equivocado. */
  color-scheme: light;

  /* Tinta fija: contornos de personajes y texto sobre color vivo, en ambos
     temas. */
  --tinta: #1d1b3a;

  --fondo: #f6f5fc;
  --superficie: #ffffff;
  --superficie-2: #efedf9;
  --linea: #e2dff1;
  --linea-fuerte: #cdc9e4;

  --texto: #1d1b3a;
  --texto-suave: #5b5879;
  --texto-tenue: #8a87a4;

  /* Color de la marca y de la acción principal. El "canto" es su versión
     oscura: el borde de abajo que da el relieve. */
  --primario: #6b4dff;
  --primario-vivo: #7a5fff;
  --primario-canto: #4a31d4;
  --primario-suave: #ebe7ff;
  --primario-texto: #5a3df0;

  /* Amarillo de premio: victorias, coronas y el botón que va sobre morado. */
  --sol: #ffc61a;
  --sol-canto: #dc9c00;

  --peligro: #ff4b4b;
  --peligro-canto: #d42f2f;
  --ok: #2fbf71;

  /* Cómo salió una repetición al practicar. "Más o menos" usa el amarillo
     de arriba. `--sube` y `--baja` son para texto sobre superficie. */
  --bien: #4cd07d;
  --bien-canto: #2a9c57;
  --mal: #ff6b6b;
  --mal-canto: #d43f3f;
  --sube: #1c8548;
  --baja: #c93434;

  /* Escala de espacios. El paso de 20px existe a propósito: sin él todo cae
     en 16px y la pantalla se ve apretada. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e7: 32px;
  --e8: 40px;
  --e9: 56px;

  --r-campo: 14px;
  --r-boton: 16px;
  --r-tarjeta: 20px;
  --r-panel: 28px;
  --r-pastilla: 999px;

  --sombra: 0 18px 40px -20px rgba(29, 27, 58, .35);

  /* Primero Pally. Lo que sigue es el respaldo por si falta el archivo: la
     redonda del sistema donde existe (iPhone, iPad, Mac) y la más gruesa
     disponible en los demás. */
  --fuente: "Pally", ui-rounded, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    Roboto, "Helvetica Neue", sans-serif;
  --fuente-titulo: "Pally", ui-rounded, "Segoe UI Black", "Segoe UI", system-ui, -apple-system,
    Roboto, "Helvetica Neue", sans-serif;

  --ancho: 1040px;
  --alto-barra: 68px;
  --alto-menu: 72px;
}

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

  --fondo: #141228;
  --superficie: #1e1b38;
  --superficie-2: #2a274d;
  --linea: #35315e;
  --linea-fuerte: #4b4682;

  --texto: #f4f2ff;
  --texto-suave: #b9b5d8;
  --texto-tenue: #8985ad;

  --primario: #7b61ff;
  --primario-vivo: #8b74ff;
  --primario-canto: #5038d8;
  --primario-suave: #2d2864;
  --primario-texto: #b6a8ff;

  --sube: #7be3a2;
  --baja: #ff9c9c;

  --sombra: 0 18px 40px -18px rgba(0, 0, 0, .7);
}