/* ============================================================
   Capello Bienes Raíces — Design tokens
   ------------------------------------------------------------
   ARCHIVO CONGELADO. Ver CONTEXT.md.
   No agregar colores, tamaños ni familias que no estén acá.
   Ningún valor de color, espaciado o tipografía puede escribirse
   literal en otro archivo CSS: siempre var(--token).

   Las @font-face NO van acá. Van en base.css (fase 1), con los
   .woff2 self-hosted en /assets/fonts/.
   ============================================================ */

:root {

   /* ---------- 1. COLOR ---------- */
   /* Muestreados del logo y de las placas aprobadas por el cliente. */

   --c-violeta: #4E1A6B;
   /* marca: botones primarios, header, corte del hero */
   --c-violeta-deep: #2B0E3D;
   /* fondos oscuros: cinta de datos, footer */
   --c-violeta-soft: #7B4A9C;
   /* hover, bordes activos, focus */
   --c-verde: #22523A;
   /* secundario del logo: badges, acentos puntuales */
   --c-whatsapp: #25D366;
   /* verde oficial de WhatsApp */
   --c-crema: #EFE6D0;
   /* texto sobre oscuro, fondos de sección alternos */
   --c-dorado: #C08A2E;
   /* acento: hairlines, subrayados, íconos */
   --c-tinta: #171320;
   /* texto principal */
   --c-papel: #FAF8F4;
   /* fondo de página */
   --c-gris: #6E6878;
   /* texto secundario, labels */
   --c-linea: #E3DCD0;
   /* bordes, divisores */

   /* El dorado es hairline, ícono y subrayado. NUNCA fondo grande.
     Para texto dorado sobre --c-violeta-deep usar la variante clara
     (el #C08A2E no llega a contraste AA en tamaños chicos). */
   --c-dorado-texto: #D9A040;

   /* Estados */
   --c-ok: #22523A;
   /* Disponible */
   --c-alerta: #C08A2E;
   /* Reservada  */
   --c-error: #8C2020;
   --c-inactivo: #6E6878;
   /* Vendida    */

   /* Superficies semánticas — usar estas en los componentes,
     no los colores crudos, para que un cambio de marca sea local. */
   --bg-page: var(--c-papel);
   --bg-surface: #FFFFFF;
   --bg-inverso: var(--c-violeta-deep);
   --bg-alterno: var(--c-crema);
   --fg-base: var(--c-tinta);
   --fg-muted: var(--c-gris);
   --fg-inverso: var(--c-crema);
   --border-base: var(--c-linea);


   /* ---------- 2. TIPOGRAFÍA ---------- */
   /* Display = Archivo (la grotesca de las placas aprobadas).
     Cuerpo  = Public Sans.
     Datos   = IBM Plex Mono → precios, m², SKU, cinta de datos.
     Toda cifra lleva font-variant-numeric: tabular-nums. */

   --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
   --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
   --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
   --fw-black: 800;

   /* Escala fluida, base 16px */
   --t-display: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);
   --t-h1: clamp(2rem, 1.4rem + 3vw, 3.25rem);
   --t-h2: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
   --t-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
   --t-body: 1.0625rem;
   /* 17px */
   --t-small: 0.875rem;
   /* 14px */
   --t-eyebrow: 0.75rem;
   /* 12px, uppercase */

   /* Precio destacado en la ficha (Plex Mono) */
   --t-precio: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);

   --lh-tight: 1.08;
   /* display y h1 */
   --lh-heading: 1.2;
   /* h2, h3 */
   --lh-body: 1.65;
   --lh-data: 1.3;

   --ls-display: -0.02em;
   /* tracking negativo: así se ven las placas */
   --ls-eyebrow: 0.14em;
   --ls-data: 0.01em;


   /* ---------- 3. ESPACIADO (base 4px) ---------- */

   --s-1: 4px;
   --s-2: 8px;
   --s-3: 12px;
   --s-4: 16px;
   --s-5: 24px;
   --s-6: 32px;
   --s-7: 48px;
   --s-8: 64px;
   --s-9: 96px;
   --s-10: 128px;

   /* Ritmo vertical de sección. Una sola variable: si cada componente
     define su propio padding, terminan cancelándose entre sí. */
   --s-section: var(--s-9);


   /* ---------- 4. LAYOUT ---------- */

   --w-max: 1200px;
   /* contenedor general */
   --w-prose: 68ch;
   /* columnas de texto largo */
   --w-gutter: var(--s-4);


   /* ---------- 5. RADIOS Y SOMBRAS ---------- */

   --r-sm: 6px;
   --r-card: 10px;
   --r-pill: 999px;

   --sh-card: 0 1px 2px rgb(23 19 32 / .06), 0 8px 24px rgb(23 19 32 / .06);
   --sh-raised: 0 12px 32px rgb(43 14 61 / .16);


   /* ---------- 6. MOTION ---------- */

   --ease: cubic-bezier(.2, .7, .3, 1);
   --dur-fast: 160ms;
   /* hover, focus */
   --dur-slow: 480ms;
   /* reveals en scroll */
   --stagger: 60ms;
   /* escalonado de la cinta de datos */


   /* ---------- 7. Z-INDEX ---------- */

   --z-base: 1;
   --z-sticky: 10;
   /* card de contacto en la ficha */
   --z-header: 100;
   --z-wa: 200;
   /* botón flotante de WhatsApp */
   --z-overlay: 300;
   /* lightbox de galería */
}


/* ---------- Accesibilidad: reducción de movimiento ----------
   Neutraliza los tokens de duración en lugar de repetir la media
   query en cada componente. */

@media (prefers-reduced-motion: reduce) {
   :root {
      --dur-fast: 0ms;
      --dur-slow: 0ms;
      --stagger: 0ms;
   }

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}