/* ───────────────────────────────────────────────────────────────────────────
   Alto de Yeguas — tokens de diseño

   Lenguaje visual compartido con Hacienda Primavera (haciendaprimavera.co),
   el otro desarrollo de PROA: papel, tinta, terracota; titulares en Schibsted
   Grotesk, etiquetas en IBM Plex Mono, acentos en Newsreader itálica. Figuras
   con marcas de corte y pies numerados, como un cuaderno de obra.

   Contraste comprobado contra el papel (#f2eee4):
     tinta      #16211b  14,1:1
     tinta-3    #56635b   5,4:1   etiquetas y texto secundario
     terracota  #c65d2e   3,6:1   SÓLO titulares grandes (≥ 24 px)
     terracota-oscura #a4471e 5,2:1   texto pequeño, botones, enlaces
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Papel ─────────────────────────────────────────────────────────────── */
  --papel:    #f2eee4;
  --papel-2:  #ebe6d9;
  --papel-3:  #e2dccc;
  --blanco:   #fbf9f4;

  /* ── Tinta ─────────────────────────────────────────────────────────────── */
  --tinta:    #16211b;
  --tinta-2:  #37453d;
  --tinta-3:  #56635b;

  /* ── Bosque (secciones oscuras, selección) ─────────────────────────────── */
  --bosque:   #23493a;
  --bosque-2: #1b3a2e;
  --crema:    #efe9dc;
  --noche:    #16211b;   /* fondo de la galería: la tinta, pero fija (dentro
                            de una sección oscura --tinta pasa a ser crema) */

  /* ── Terracota ─────────────────────────────────────────────────────────── */
  --terracota:        #c65d2e;
  --terracota-oscura: #a4471e;
  --durazno:          #e9a47e;   /* el acento sobre fondos oscuros */

  /* ── Líneas ────────────────────────────────────────────────────────────── */
  --linea:        rgb(22 33 27 / .14);
  --linea-fuerte: rgb(22 33 27 / .30);
  --linea-clara:  rgb(239 233 220 / .16);

  /* ── Estado comercial (legibles sobre papel, ≥ 4,5:1) ──────────────────── */
  --disponible: #2f6f45;
  --separado:   #8a5610;
  --reservada:  #2f5f94;
  --vendido:    #8e3528;

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  --f-titular: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-texto:   "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-serif:   "Newsreader", Georgia, "Times New Roman", serif;

  /* Escala. El cuerpo va a 17 px: el sitio se mira en una sala de ventas, a
     un metro de la pantalla, y en el teléfono de un cliente al sol. */
  --t-display: clamp(2.75rem, 1.2rem + 5.6vw, 5.5rem);
  --t-h2:      clamp(2.1rem, 1.25rem + 2.9vw, 3.6rem);
  --t-h3:      clamp(1.4rem, 1.15rem + .8vw, 1.75rem);
  --t-lead:    clamp(1.125rem, 1.02rem + .4vw, 1.3rem);
  --t-cuerpo:  1.0625rem;
  --t-chico:   .9375rem;
  --t-mono:    .8125rem;      /* 13 px: el mínimo para una etiqueta legible */
  --t-dato:    clamp(1.2rem, 1.08rem + .45vw, 1.45rem);

  --interlineado:        1.6;
  --interlineado-titulo: 1.02;
  --tracking-titulo:     -.028em;
  --tracking-mono:       .08em;

  /* ── Espacio ───────────────────────────────────────────────────────────── */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;    --e-10: 8rem;

  --canal:     clamp(1rem, .4rem + 2.6vw, 2rem);
  --ancho-max: 80rem;
  --alto-barra: 3.75rem;      /* barra superior del teléfono */
  --seccion:   clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* ── Forma ─────────────────────────────────────────────────────────────── */
  --radio:       2px;        /* botones y tarjetas: casi rectos, como la referencia */
  --radio-pill:  999px;      /* sólo las pastillas de estado */

  /* ── Movimiento ────────────────────────────────────────────────────────── */
  --curva:  cubic-bezier(.22, .61, .36, 1);
  --rapido: 140ms;
  --normal: 260ms;
  --lento:  560ms;

  --z-cabecera: 50;
  --z-panel:    60;
  --z-modal:    80;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --normal: 0ms; --lento: 0ms; }
}