/* ==========================================================================
   WALFTY Property Group — Design tokens
   Derivados del manual de marca (isotipo de 3 barras + wordmark).
   Fuente de verdad del diseno. No escribir colores literales fuera de aqui.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --w-navy-900: #0B1F5C;   /* fondo oscuro corporativo (tarjeta oscura del manual) */
  --w-navy-800: #102A78;
  --w-blue-900: #14239B;   /* azul del wordmark WALFTY */
  --w-blue-700: #1547D6;   /* barra izquierda del isotipo */
  --w-blue-500: #1B7BEE;   /* barra central del isotipo */
  --w-cyan-400: #29B0F7;   /* barra derecha + "PROPERTY GROUP" */
  --w-cyan-100: #D8EEFD;

  /* --- Neutrales -------------------------------------------------------- */
  --w-ink:      #0E1A33;   /* texto principal */
  --w-ink-2:    #3A4761;   /* texto secundario */
  --w-muted:    #66748F;   /* texto terciario / labels */
  --w-line:     #DEE6F3;   /* bordes */
  --w-bg:       #FFFFFF;
  --w-bg-2:     #F4F7FC;   /* fondo de seccion alterna */
  --w-bg-3:     #EAF1FB;

  /* --- Semanticos ------------------------------------------------------- */
  --w-on-dark:      #FFFFFF;
  --w-on-dark-soft: #B9C7E6;
  --w-success:      #10A05A;

  /* Marcador de dato pendiente del cliente. Deliberadamente estridente:
     ningun build con esto visible puede salir a produccion. */
  --w-pending-bg:     #FFE500;
  --w-pending-ink:    #7A0050;
  --w-pending-border: #C2007A;

  /* --- Gradientes de marca ---------------------------------------------- */
  --w-grad-brand: linear-gradient(100deg, var(--w-blue-900) 0%, var(--w-blue-700) 45%, var(--w-cyan-400) 100%);
  --w-grad-dark:  linear-gradient(160deg, var(--w-navy-900) 0%, #071540 100%);

  /* --- Tipografia ------------------------------------------------------- */
  --w-font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --w-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --w-fs-xs:   0.75rem;   /* 12px */
  --w-fs-sm:   0.875rem;  /* 14px */
  --w-fs-base: 1rem;      /* 16px */
  --w-fs-md:   1.125rem;  /* 18px */
  --w-fs-lg:   1.375rem;  /* 22px */
  --w-fs-xl:   1.75rem;   /* 28px */
  --w-fs-2xl:  2.125rem;  /* 34px */
  --w-fs-3xl:  2.75rem;   /* 44px */

  /* --- Espaciado -------------------------------------------------------- */
  --w-sp-1: 0.25rem;
  --w-sp-2: 0.5rem;
  --w-sp-3: 0.75rem;
  --w-sp-4: 1rem;
  --w-sp-5: 1.5rem;
  --w-sp-6: 2rem;
  --w-sp-7: 3rem;
  --w-sp-8: 4rem;
  --w-sp-9: 5.5rem;

  /* --- Formas y sombras -------------------------------------------------- */
  --w-radius-sm: 6px;
  --w-radius:    12px;
  --w-radius-lg: 20px;
  --w-radius-pill: 999px;

  --w-shadow-sm: 0 1px 2px rgba(14, 26, 51, .06), 0 2px 8px rgba(14, 26, 51, .05);
  --w-shadow:    0 4px 12px rgba(14, 26, 51, .07), 0 12px 32px rgba(14, 26, 51, .07);
  --w-shadow-lg: 0 12px 28px rgba(11, 31, 92, .13), 0 28px 64px rgba(11, 31, 92, .12);

  /* --- Layout ----------------------------------------------------------- */
  --w-container: 1160px;
  --w-nav-h: 64px;
  --w-sticky-h: 68px;   /* barra fija de contacto en mobile */
}

/* Los tamanos grandes escalan solo en desktop. Mobile-first, base 375px. */
@media (min-width: 768px) {
  :root {
    --w-fs-lg:  1.5rem;
    --w-fs-xl:  2rem;
    --w-fs-2xl: 2.75rem;
    --w-fs-3xl: 3.75rem;
    --w-nav-h: 76px;
  }
}