/* Inmocro Framework — design tokens.
   Plantilla 'premium': lenguaje visual estilo boutique inmobiliaria (ref. vericorral.com).
   Se pueden sobrescribir por cliente desde site.json (ver inc/assets.php).
   NUNCA hardcodear color/espaciado/tipografia en un componente: usar estas variables. */

:root {
  /* Color — marca */
  --c-primary: #082220;          /* verde muy oscuro: texto, cabecera, pie */
  --c-primary-ink: #F9F5EF;      /* texto sobre primario */
  --c-accent: #80965D;           /* oliva/salvia: botones, enlaces de accion */
  --c-accent-ink: #ffffff;
  --c-gold: #CAAD6E;             /* dorado calido: filetes, firmas, detalles */

  /* Color — neutros */
  --c-ink: #082220;              /* texto principal */
  --c-muted: #5c6b60;            /* texto secundario */
  --c-line: #d9d7cd;             /* lineas / bordes sobre crema */
  --c-surface: #ECEFE7;          /* seccion alterna (gris verdoso palido) */
  --c-base: #F9F5EF;             /* fondo principal (crema) */
  --c-white: #ffffff;

  /* Tipografia */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Unna", "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --fs-3xl: clamp(2.4rem, 1.3rem + 4.6vw, 5.5rem);

  --lh-tight: 1.08;
  --lh-body: 1.7;

  --tracking-eyebrow: 0.18em;
  --tracking-button: 0.12em;

  /* Espaciado */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4.5rem;
  --sp-6: 7rem;
  --sp-7: 10rem;

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 720px;
  --radius: 3px;                 /* esquinas casi rectas */
  --radius-lg: 4px;
  --shadow: 0 10px 40px rgba(8, 34, 32, 0.10);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-accent) 45%, transparent);

  /* --- Contrato de skin -------------------------------------------------
     Estos valores son los de la plantilla 'premium'. Un skin
     (assets/css/skins/<nombre>.css) los redefine bajo body.skin-<nombre>
     para cambiar el chrome sin reescribir reglas. */

  /* Cabecera / pie */
  --header-bg: var(--c-primary);
  --header-fg: var(--c-primary-ink);
  --header-h: 72px;
  --header-h-lg: 84px;
  --logo-h: 40px;
  --nav-active: var(--c-gold);
  --footer-bg: var(--c-primary);
  --footer-fg: var(--c-primary-ink);

  /* Titulares / marca */
  --heading-font: var(--font-serif);
  --heading-weight: 400;
  --site-title-font: var(--font-serif);
  --site-title-transform: uppercase;
  --hero-title-transform: uppercase;

  /* Botones */
  --btn-radius: var(--radius);
  --btn-weight: 500;
  --btn-transform: uppercase;
  --btn-pad-y: 1rem;
  --btn-pad-x: 2rem;

  /* Tarjetas / media */
  --card-bg: var(--c-white);
  --card-border-color: var(--c-line);
  --card-radius: 0px;
  --media-ratio: 4 / 3;
  --price-font: var(--font-serif);

  /* Filete del antetitulo (transparent lo oculta) */
  --eyebrow-rule: var(--c-gold);

  /* Breakpoints (referencia): 768 / 1024 / 1280 */
}