/* ============================================================================================
   LOS COLORES DE HERMES TAROT 444: la web y el Club usan estos, de acá (se publica en /paleta.css).
   Para cambiar un color: cambiá el código acá, guardá y desplegá. Cambia en todas las páginas.
   Paleta «Crema y salvia» (Matías, 5/11/2026); verde y marrón más vivos el mismo día. Detalle y reglas: docs/paleta-club.md.
   Los tonos claros, transparentes y sombras salen solos de estos (con color-mix), no hace falta tocarlos.
   Lo único que no lee de acá (porque el navegador no lo permite): el color de la barra del celular
   (<meta name="theme-color">) y los manifest.webmanifest. Si cambiás --hx-fondo, cambialos también (buscá F5F0E6).
   ============================================================================================ */
:root{
  color-scheme:light;

  /* Fondos */
  --hx-fondo:#F5F0E6;          /* fondo de las páginas (crema) */
  --hx-hundido:#EFE8DA;        /* un poco más oscuro que el fondo: campos, tapete de la mesa */
  --hx-lado:#FBF7EF;           /* el menú lateral del Club */
  --hx-tarjeta:#FFFDF8;        /* tarjetas, filas, menús (papel) */

  /* Líneas */
  --hx-borde:#E3DACA;          /* borde de tarjetas y botones */
  --hx-borde-fuerte:#D3C8B4;   /* borde al pasar el mouse */
  --hx-divisor:#EAE2D4;        /* líneas que separan filas */

  /* Texto */
  --hx-texto:#2F2A24;          /* texto principal */
  --hx-suave:#6E665C;          /* texto secundario: fechas, aclaraciones */

  /* Acento (botones, lo seleccionado, íconos) */
  --hx-acento:#2A8053;         /* verde vivo (antes salvia #5E7A5E) */
  --hx-acento-tinta:#1F6B44;   /* verde más oscuro, para texto chico en acento (se lee mejor) */
  --hx-sobre-acento:#FFFDF8;   /* texto encima de un botón de acento */

  /* Títulos y etiquetas (encabezados de sección, «This week», días del calendario, horas) */
  --hx-titulo:#A0522D;         /* marrón siena, vivo: resalta y ordena la página (en verde: var(--hx-acento-tinta)) */

  /* Fondos suaves (estilo B, Matías 5/11/2026): la tarjeta principal de cada página y los círculos de los íconos */
  --hx-acento-fondo:#E4F1E8;   /* fondo verde clarito de la tarjeta destacada */
  --hx-acento-linea:#BFDCC9;   /* su borde */
  --hx-acento-circulo:#DCEEE2; /* círculo detrás de un ícono verde */
  --hx-titulo-circulo:#F3E2D6; /* círculo detrás de un ícono marrón */

  /* Detalles */
  --hx-dorado:#A07D2C;         /* adornos: el «444» del logo, estrellas */
  --hx-dorado-tinta:#8A6B24;
  --hx-rosa:#C9736B;           /* «en vivo», avisos suaves */
  --hx-rosa-tinta:#A5544D;
  --hx-rojo:#B8463F;           /* errores, borrar */
  --hx-bien:#2A8053;           /* hecho, bien */
  --hx-bien-tinta:#1F6B44;
  --hx-rehacer:#B8752F;        /* rehacer, pendiente */
  --hx-rehacer-tinta:#8F5A23;

  /* Derivados (salen de los de arriba) */
  --hx-tinte:color-mix(in srgb,var(--hx-acento) 14%,transparent);     /* fondo del ícono y de lo seleccionado */
  --hx-hover:color-mix(in srgb,var(--hx-texto) 5%,transparent);       /* al pasar el mouse */
  --hx-velo:color-mix(in srgb,var(--hx-sombra-base) 45%,transparent); /* detrás de una ventana abierta */
  --hx-sombra:0 8px 24px color-mix(in srgb,var(--hx-sombra-base) 12%,transparent);

  /* Fijos */
  --hx-sombra-base:#2F2A24;    /* de qué color son las sombras y el velo (en oscuro, negro) */
  --hx-pantalla:#2F2A24;       /* fondo del video y de la vista previa de la cámara: siempre oscuro */
  --hx-sello:url(/sello.svg);  /* el sello de Hermes de las filas (en oscuro, /sello-oscuro.svg) */
}

/* ============================================================================================
   MODO OSCURO (Matías, 7/11/2026): fondo oscuro en vez de crema; el dorado, el verde y el siena siguen, más claros
   para que se lean. Cada uno lo elige en el menú del perfil («Dark mode» / «Light mode»); si no eligió, va como el aparato.
   El script del <head> (tema.js, build.sh lo pone en todas las páginas) le pone data-tema="oscuro" o "claro" a <html>.
   Solo en pantalla: al imprimir queda claro.
   ============================================================================================ */
@media screen{
:root[data-tema=oscuro],:root[data-tema=oscuro] body{color-scheme:dark}
:root[data-tema=oscuro]{
  --hx-fondo:#15130F; --hx-hundido:#0F0D0A; --hx-lado:#1A1814; --hx-tarjeta:#201D18;
  --hx-borde:#34302A; --hx-borde-fuerte:#4A443B; --hx-divisor:#2B2822;
  --hx-texto:#EFE9DE; --hx-suave:#A79F92;
  --hx-acento:#5CBF8A; --hx-acento-tinta:#7ED3A5; --hx-sobre-acento:#10170F;
  --hx-titulo:#D8C3A0; /* arena (Matías, 7/11/2026: «no me gusta ese naranja») */
  --hx-acento-fondo:#1C2E23; --hx-acento-linea:#2D4A38; --hx-acento-circulo:#213529; --hx-titulo-circulo:#332D24;
  --hx-dorado:#D4AF5A; --hx-dorado-tinta:#E0BE6E;
  --hx-rosa:#E08F86; --hx-rosa-tinta:#EBA39B; --hx-rojo:#E06A60;
  --hx-bien:#5CBF8A; --hx-bien-tinta:#7ED3A5; --hx-rehacer:#D99A55; --hx-rehacer-tinta:#E8B276;
  --hx-sombra-base:#000; --hx-velo:color-mix(in srgb,#000 60%,transparent);
  --hx-sello:url(/sello-oscuro.svg);
}
/* el botón de Google viene en claro: que no le quede un recuadro blanco alrededor */
:root[data-tema=oscuro] #gbtn{color-scheme:light}
}