/* Vitriospot — colores y letras de la marca («Vitral al atardecer»).
   Para la página pública y, más adelante, el panel del estudio. Las rutas de las
   fuentes son relativas a este archivo: si se copia, copiar también fuentes/. */

@font-face {
  font-family: "Gloock";
  src: url("../fuentes/gloock-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fuentes/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Los colores de la marca (no cambian con el tema) */
  --vs-vino: #221417;      /* tinta: texto y logo */
  --vs-papel: #F7F1EA;     /* fondo claro */
  --vs-coral: #E8505B;     /* vidrio izquierdo; decorativo, nunca texto sobre papel */
  --vs-orquidea: #8A3A74;  /* vidrio derecho del logo */
  --vs-cruce: #7E1229;     /* donde se montan los dos vidrios */
  --vs-ciruela: #6B2D5C;   /* botón principal, con letra blanca (9,7:1) */
  --vs-ambar: #F39C3D;     /* el sol; con letra vino encima (8,2:1) */
  --vs-granate: #B8323F;   /* el rojo que sí se puede leer: énfasis y enlaces (5,3:1) */

  /* Uso, tema claro */
  --fondo: var(--vs-papel);
  --superficie: #FFFCF8;
  --texto: var(--vs-vino);
  --texto-suave: #6E5753;  /* 5,9:1 sobre papel */
  --linea: #E7DCD1;
  --accion: var(--vs-ciruela);
  --accion-texto: #FFFFFF;
  --enfasis: var(--vs-granate);

  /* Letras */
  --letra-titulo: "Gloock", Georgia, "Times New Roman", serif;
  --letra-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala (proporción 1,25 sobre 17 px) */
  --t-pie: 0.8125rem;    /* 13 */
  --t-chico: 0.9375rem;  /* 15 */
  --t-texto: 1.0625rem;  /* 17 */
  --t-h4: 1.3125rem;     /* 21 */
  --t-h3: 1.625rem;      /* 26 */
  --t-h2: clamp(2rem, 4vw, 2.75rem);
  --t-h1: clamp(2.5rem, 6.5vw, 4.5rem);

  --radio: 10px;
  --radio-boton: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: var(--vs-vino);
    --superficie: #2D1C1F;
    --texto: var(--vs-papel);
    --texto-suave: #C9B8B2;  /* 9,3:1 */
    --linea: #3D2A2D;
    --accion: var(--vs-ambar);
    --accion-texto: var(--vs-vino);
    --enfasis: #F2879A;      /* 7,4:1 */
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: var(--vs-vino);
  --superficie: #2D1C1F;
  --texto: var(--vs-papel);
  --texto-suave: #C9B8B2;
  --linea: #3D2A2D;
  --accion: var(--vs-ambar);
  --accion-texto: var(--vs-vino);
  --enfasis: #F2879A;
  color-scheme: dark;
}