/*
 * TEMA — colores y letras de todo el sistema de reservas, en un solo sitio.
 * Marca Versos Sueltos (MARCA/PALETA Y TIPOGRAFIAS.md). Solo tres colores: tinta #160D0E, crema #F5ECE3 y oro
 *   #B88A44 (en modo claro, el oro hondo #7D5A23 para que se lea sobre la crema), más sus tonos suaves.
 * Modo oscuro y modo claro: por defecto el del sistema del móvil;
 * se puede forzar con <html data-tema="claro"> o <html data-tema="oscuro">.
 * El rojo solo se usa, discreto, para errores y alergias.
 */
/* Letras de la marca (licencia OFL, en recursos/fuentes/). Para cambiar de letra, cambia
   el archivo aquí y las dos variables --vs-letra-titulos y --vs-letra-texto de más abajo.
   Van en woff2 y solo con los caracteres de los 5 idiomas (unos 37 KB cada una, en vez de 130-220 KB en .ttf).
   Los .ttf completos se quedan en la carpeta para volver a sacar el subconjunto si hace falta (ver LEEME). */
@font-face {
  font-family: "Libre Caslon Text";
  src: url("fuentes/libre-caslon-text.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fuentes/lora.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fuentes/lora-italica.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Modo oscuro (chocolate, crema y dorado) ---------- */
:root {
  color-scheme: dark;
  --vs-fondo: #160d0e;
  --vs-superficie: #22140f;
  --vs-superficie-2: #2c1b14;
  --vs-borde: #7a6252;
  --vs-borde-suave: #3a2820;
  --vs-texto: #f5ece3;
  --vs-texto-suave: #c8b6a4;
  --vs-texto-tenue: #a89382;
  --vs-acento: #b88a44;          /* oro de la marca (6,2:1 sobre la tinta) */
  --vs-acento-rgb: 184 138 68;
  --vs-acento-texto: #160d0e;   /* texto encima del acento */
  --vs-alerta: #e58a7d;          /* solo errores y alergias */
  --vs-barra-fondo: rgba(22, 13, 14, .94);
  --vs-sombra: 0 8px 24px rgba(0, 0, 0, .35);
}

/* ---------- Modo claro (crema, casi negro y el mismo dorado, más hondo para leerse) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    color-scheme: light;
    --vs-fondo: #f5ece3;
    --vs-superficie: #fffaf3;
    --vs-superficie-2: #efe4d6;
    --vs-borde: #8f7c6c;
    --vs-borde-suave: #e2d5c5;
    --vs-texto: #160d0e;
    --vs-texto-suave: #5a4a40;
    --vs-texto-tenue: #7a6a5e;
    --vs-acento: #7d5a23;          /* oro de la marca para leerse sobre crema (5,4:1) */
    --vs-acento-rgb: 125 90 35;
    --vs-acento-texto: #fffaf3;
    --vs-alerta: #a8432f;
    --vs-barra-fondo: rgba(245, 236, 227, .94);
    --vs-sombra: 0 6px 18px rgba(80, 50, 20, .10);
  }
}
:root[data-tema="claro"] {
  color-scheme: light;
  --vs-fondo: #f5ece3;
  --vs-superficie: #fffaf3;
  --vs-superficie-2: #efe4d6;
  --vs-borde: #8f7c6c;
  --vs-borde-suave: #e2d5c5;
  --vs-texto: #160d0e;
  --vs-texto-suave: #5a4a40;
  --vs-texto-tenue: #7a6a5e;
  --vs-acento: #7d5a23;
  --vs-acento-rgb: 125 90 35;
  --vs-acento-texto: #fffaf3;
  --vs-alerta: #a8432f;
  --vs-barra-fondo: rgba(245, 236, 227, .94);
  --vs-sombra: 0 6px 18px rgba(80, 50, 20, .10);
}

/* ---------- Derivados (no tocar: salen de los de arriba) ---------- */
:root {
  --vs-acento-suave: rgb(var(--vs-acento-rgb) / .16);
  --vs-acento-medio: rgb(var(--vs-acento-rgb) / .38);
  --vs-alerta-suave: color-mix(in srgb, var(--vs-alerta) 12%, transparent);
  /* Nombres antiguos que usan los estilos: todos apuntan a los tres colores. */
  --vs-primario: var(--vs-acento);
  --vs-primario-texto: var(--vs-acento-texto);
  --vs-primario-suave: var(--vs-acento-suave);
  --vs-ok: var(--vs-acento);
  --vs-ok-suave: var(--vs-acento-suave);
  --vs-aviso: var(--vs-acento);
  --vs-aviso-suave: var(--vs-acento-suave);
  --vs-error: var(--vs-alerta);
  --vs-error-suave: var(--vs-alerta-suave);
  --vs-foco: var(--vs-texto);

  /* Letras */
  --vs-letra-titulos: "Libre Caslon Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --vs-letra-texto: "Lora", Georgia, "Times New Roman", serif;
  --vs-tamano-base: 16px;

  /* Formas */
  --vs-radio: 14px;
  --vs-radio-boton: 999px;
}

/* Cosas que solo se ven en un modo (logo claro u oscuro, icono de sol o luna). */
.vs-solo-claro { display: none !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .vs-solo-oscuro { display: none !important; }
  :root:not([data-tema="oscuro"]) .vs-solo-claro { display: revert !important; }
}
:root[data-tema="claro"] .vs-solo-oscuro { display: none !important; }
:root[data-tema="claro"] .vs-solo-claro { display: revert !important; }