/* ============================================================================
   tokens.css · NovaLux Estates — Sistema de diseño (ÚNICA FUENTE DE VERDAD)
   ----------------------------------------------------------------------------
   IP10 · Agencia de Servicios Digitales (Huelva)
   Paleta: NovaLux-Manual-Identidad.md (§08 Color · §09 Tipografía).

   🔴 USO DE COLOR — DECISIÓN DE CLIENTE (2026-06-16), SUSTITUYE al 60/30/10 del manual:
     · BASE = Blanco / Marfil + ORO. El oro es el color de marca dominante (acentos,
       botones primarios, filetes, bordes, eyebrows).
     · ESMERALDA / VERDE = SOLO acentos y detalles: iconos, etiquetas pequeñas,
       badge "disponible", estados hover, botón de WhatsApp y FAB flotante.
       NUNCA como relleno de fondo grande.
     · ANCLA OSCURA = CARBÓN (#1C1B18), no verde: footer, barra de utilidad del
       header y banda "vender". Sobre carbón: texto marfil + acentos oro.
     · Títulos sobre claro: Carbón. Eyebrows/etiquetas: Oro.
   Mantener cero colores/fuentes hardcodeados: todo el front referencia estas variables.

   ENCOLADO: encolar globalmente desde el plugin ip10-inmuebles (o el tema).
   FUENTES (Google Fonts · OFL): Cinzel, Cormorant Garamond, Montserrat, Space Mono.
   TODO: migrar a woff2 autoalojadas (subset) — CLAUDE.md §6 / §14.3.
   ============================================================================ */

:root {
  /* ---- Paleta de marca (manual §08 · hex inalterados) ---- */
  --color-primary:    #0D4F38;  /* Esmeralda NovaLux — ahora ACENTO/detalle */
  --color-secondary:  #052B1B;  /* Verde Bosque — detalle puntual */
  --color-accent:     #C2A878;  /* Oro Champán — COLOR DE MARCA DOMINANTE */
  --color-ink:        #1C1B18;  /* Carbón — texto principal y ancla oscura */
  --color-bg:         #FAF8F4;  /* Marfil — fondo base */

  /* ---- Apoyo (manual §08) ---- */
  --color-gold-light: #E7D6B0;  /* Oro Claro */
  --color-gold-dark:  #94794D;  /* Oro Viejo — solo bordes/iconos/decoración: en texto pequeño sobre claro NO llega a AA (4.11:1 sobre blanco) */
  --color-gold-text:  #75603E;  /* Oro Tinta — texto pequeño sobre fondo claro (WCAG 2.1 AA: ≥5.3:1 sobre blanco/marfil; subsanación Red.es 2026-07) */
  --color-stone:      #6E6A63;  /* Gris Piedra */
  --color-white:      #FFFFFF;
  --color-ink-deep:   #141310;  /* Carbón más profundo (barra inferior) */

  /* ---- Roles semánticos (USAR ESTOS en el front) ---- */
  --surface:          #FAF8F4;  /* fondo base de página (marfil) */
  --surface-2:        #FFFFFF;  /* tarjetas / superficies elevadas (blanco) */
  --surface-dark:     #1C1B18;  /* ANCLA oscura: footer, banda vender, utility bar */
  --surface-darker:   #141310;  /* sub-banda más oscura */
  --on-dark:          #FAF8F4;  /* texto sobre superficie oscura */
  --heading:          #1C1B18;  /* títulos sobre claro */
  --accent:           #C2A878;  /* acento primario = oro */
  --accent-strong:    #94794D;  /* oro viejo (texto/acentos sobre claro) */
  --accent-soft:      #E7D6B0;  /* oro claro (bordes, líneas) */
  --accent-detail:    #0D4F38;  /* VERDE: solo detalles (iconos, hover, WhatsApp) */

  /* ---- UI derivados ---- */
  --color-cta-wa:           #0D4F38; /* WhatsApp = esmeralda (acento/detalle permitido) */
  --color-cta-wa-hover:     #052B1B;
  --color-btn-primary:      #C2A878; /* botón primario = oro sólido */
  --color-btn-primary-ink:  #052B1B; /* texto sobre botón oro */
  --color-badge-disponible: #0D4F38; /* badge pequeño (detalle verde) */
  --color-badge-reservado:  #C2A878; /* Oro */
  --color-badge-vendido:    #6E6A63; /* Gris Piedra */
  --border:                 #E7D6B0;
  --line:                   rgba(148,121,77,.20);  /* línea sutil (oro) sobre claro */
  --line-on-dark:           rgba(231,214,176,.16);  /* línea sutil (oro) sobre carbón */
  --overlay:                rgba(28,27,24,.45);      /* velo / backdrop (carbón) */

  /* ---- Tipografía (manual §09) ---- */
  --font-display: "Cinzel", serif;              /* títulos, marca — 600/700 */
  --font-serif:   "Cormorant Garamond", serif;  /* entradillas, citas — 400/400i */
  --font-body:    "Montserrat", sans-serif;     /* cuerpo, UI — 300/400/500/600 */
  --font-mono:    "Space Mono", monospace;      /* etiquetas técnicas / eyebrows */

  --tracking-eyebrow: .22em;
  --tracking-title:   .02em;

  /* ---- Layout / espaciado ---- */
  --container:   1280px;
  --gutter:      28px;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-pill: 99px;
  --section-y:   clamp(64px, 8vw, 120px);

  /* ---- Sombra / movimiento ---- */
  --shadow-soft: 0 24px 60px -20px rgba(28,27,24,.18);
  --shadow-card: 0 14px 40px -22px rgba(28,27,24,.22);
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --speed:       .3s;

  /* ---- Breakpoints (referencia; los @media usan literales 980/640) ---- */
  --bp-tablet: 980px;
  --bp-mobile: 640px;

  /* ---- z-index ---- */
  --z-header: 9000;
  --z-drawer: 9200;
  --z-float:  8000;
}

/* ----------------------------------------------------------------------------
   ALIAS de namespace para las plantillas autocontenidas (header/footer/home).
   Cada plantilla declara su propio bloque --nlx-* bajo su clase raíz para
   funcionar dentro del widget HTML aunque tokens.css no esté encolado; estos
   alias permiten resolver --nlx-* contra el canon. Mantener en sincronía.
   ---------------------------------------------------------------------------- */
:root {
  --nlx-emerald: var(--color-primary);
  --nlx-forest:  var(--color-secondary);
  --nlx-gold:    var(--color-accent);
  --nlx-gold-l:  var(--color-gold-light);
  --nlx-gold-d:  var(--color-gold-dark);
  --nlx-gold-txt:var(--color-gold-text);
  --nlx-ivory:   var(--color-bg);
  --nlx-white:   var(--color-white);
  --nlx-stone:   var(--color-stone);
  --nlx-ink:     var(--color-ink);
  --nlx-ink-deep:var(--color-ink-deep);
  --nlx-line:    var(--line);

  --nlx-font-display: var(--font-display);
  --nlx-font-serif:   var(--font-serif);
  --nlx-font-body:    var(--font-body);
  --nlx-font-mono:    var(--font-mono);
}