/* Liberty — Design tokens. "Editorial luminoso": base marfil/blanco cálido,
   carbón como acento estructural (header, footer, franjas alternas, overlays),
   dorado champán con moderación. */
:root {
  /* ---------- Paleta cruda ---------- */

  /* Claro (base) */
  --color-paper: #faf6ee;
  --color-paper-alt: #f1e9d8;
  --color-paper-card: #fffdf9;

  /* Tinta (texto sobre claro) */
  --color-ink: #241f1a;
  --color-ink-muted: #6b6255;
  --color-ink-faint: #a89d8c;

  /* Carbón (acento estructural: header, footer, franjas oscuras, overlays) */
  --color-charcoal: #1b1a18;
  --color-charcoal-alt: #232120;
  --color-charcoal-elevated: #2b2825;

  /* Marfil (texto sobre carbón) */
  --color-ivory: #efe9df;
  --color-ivory-muted: #b9b0a2;
  --color-ivory-faint: #8a8177;

  /* Dorado champán — dos calibraciones para mantener legibilidad en ambos fondos */
  --color-gold: #c6a35d;        /* decorativo: líneas, fills, hover — pensado sobre carbón */
  --color-gold-soft: #dcc389;   /* hover claro sobre carbón */
  --color-gold-deep: #8f6a1c;   /* texto/iconos sobre claro — contraste verificado ~4.5:1 sobre --color-paper */
  --color-gold-line-light: rgba(143, 106, 28, 0.32);
  --color-gold-line-dark: rgba(198, 163, 93, 0.28);

  /* Mapa de parroquias — gris cálido neutro (deliberadamente fuera de la
     familia dorada, para que "con propiedades" vs. "sin propiedades" se
     lea como un cambio de color, no solo de intensidad). */
  --color-parroquia-empty: #c9c2b5;
  --color-parroquia-empty-line: #a89f8f;
  --color-parroquia-empty-hover: #b7ae9e;

  /* Overlay sobre fotografía (siempre oscuro, para legibilidad del texto) */
  --overlay-dark: rgba(14, 13, 11, 0.55);
  --overlay-dark-strong: rgba(10, 9, 8, 0.78);
  --overlay-gradient: linear-gradient(180deg, rgba(14,13,11,0) 0%, rgba(14,13,11,0.82) 100%);

  /* Estados semánticos */
  --status-available: #5b7a45;
  --status-sold: #8a5a3e;
  --status-available-on-dark: #9db07f;
  --status-sold-on-dark: #c99b7c;

  /* ---------- Superficie activa (claro por defecto; .surface-dark la invierte) ---------- */
  --surface-bg: var(--color-paper);
  --surface-bg-raised: var(--color-paper-alt);
  --surface-card-bg: var(--color-paper-card);
  --surface-ink: var(--color-ink);
  --surface-ink-muted: var(--color-ink-muted);
  --surface-ink-faint: var(--color-ink-faint);
  --surface-gold: var(--color-gold-deep);
  --surface-gold-fill: var(--color-gold);
  --surface-line: var(--color-gold-line-light);
  --surface-hairline-soft: rgba(36, 31, 26, 0.10);
  --surface-shadow: 0 10px 30px rgba(36, 31, 26, 0.12);
  --surface-shadow-hover: 0 20px 44px rgba(36, 31, 26, 0.16);
  --surface-status-available: var(--status-available);
  --surface-status-sold: var(--status-sold);

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica — fluida, mobile-first */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.35rem + 2.4vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);
  --text-5xl: clamp(2.75rem, 1.6rem + 5.2vw, 5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* Espaciado — escala base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;

  /* Contenedores — 3 anchos según tipo de contenido.
     --container-wide sube a fluido (min 48px de margen lateral) recién
     a partir de 1440px — ver media query más abajo; por debajo de eso
     el cap no se activa nunca, así que móvil/tablet quedan intactos. */
  --container-wide: 1440px;   /* grillas, secciones, footer — ancho "por defecto" */
  --container-text: 840px;    /* párrafos largos, descripciones (65-75 caracteres) */
  --container-pad: 22px;      /* mobile: todo colapsa a 100% + este padding lateral */

  /* Header inteligente */
  --header-height-top: 92px;
  --header-height-compact: 60px;

  /* Radios — mínimos, casi rectos (estética boutique, no redondeada) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Sombras de referencia (calibradas para superficie clara; el carbón usa --shadow-dark-md) */
  --shadow-sm: 0 1px 3px rgba(36, 31, 26, 0.10);
  --shadow-md: 0 10px 30px rgba(36, 31, 26, 0.12);
  --shadow-lg: 0 24px 60px rgba(36, 31, 26, 0.16);
  --shadow-dark-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-gold-ring: 0 0 0 1px var(--color-gold-line-light);

  /* Movimiento — mínimo y suave */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;

  /* Bordes */
  --hairline: 1px solid var(--surface-line);
  --hairline-soft: 1px solid var(--surface-hairline-soft);
}

/* Pantallas grandes (monitores comunes 1440-1920+): el wide se vuelve
   fluido con un margen lateral mínimo de 48px, para que las secciones
   no se peguen a los bordes ni queden angostas y perdidas. No afecta
   nada por debajo de 1440px — móvil y tablet quedan intactos. */
@media (min-width: 1440px) {
  :root {
    --container-wide: min(1440px, calc(100% - 96px));
  }
}

/* ---------- Superficie oscura: carbón como acento estructural ----------
   Se aplica a header, footer y a máx. 1 de cada 3 franjas de sección.
   Redefine las variables de superficie; los componentes (tarjetas,
   botones, líneas, texto) heredan el contexto correcto automáticamente. */
.surface-dark {
  --surface-bg: var(--color-charcoal);
  --surface-bg-raised: var(--color-charcoal-alt);
  --surface-card-bg: var(--color-charcoal-elevated);
  --surface-ink: var(--color-ivory);
  --surface-ink-muted: var(--color-ivory-muted);
  --surface-ink-faint: var(--color-ivory-faint);
  --surface-gold: var(--color-gold);
  --surface-gold-fill: var(--color-gold);
  --surface-line: var(--color-gold-line-dark);
  --surface-hairline-soft: rgba(239, 233, 223, 0.08);
  --surface-shadow: var(--shadow-dark-md);
  --surface-shadow-hover: 0 24px 56px rgba(0, 0, 0, 0.55);
  --surface-status-available: var(--status-available-on-dark);
  --surface-status-sold: var(--status-sold-on-dark);

  background: var(--surface-bg);
  color: var(--surface-ink);
}